miniUI合并居中详解

如图：

上网查了miniUI的有关资料，想要将它们合并居中，达到以下的效果。

具体做法：
在表的头那一项加align="center",可以使其居中。

此处的grid是你的datagrid的id；
定义一个变量数组，里面是你需要合并的单元格，其中包含4个属性，rowIndex,columnIndex分别代表行和列索引，均是从0开始算，rowSpan和colSpan分别代表要合并的行和列的宽度。
（3）最后需要调用mergeCells()方法来进行单元格合并，（2）中只是指出哪些单元格需要按照什么要求进行合并，真正的合并是步骤（3）。

最终达到效果：

记录下来，仅供学习，谢谢各位大佬的指点。

附：日期的控件

miniUI数据渲染：

<div id="datagridMiniFit" class="mini-fit"><div id="markWeightEquipmentDatagrid" class="mini-datagrid" onLoad="load" style="width:100%;height:100%;" allowResize="true" ondrawgroup="onDrawGroup"url="markWeightEquipment.do?method=markWeightEquipmentList" idField="ID" multiSelect="true" showPager="false"><div property="columns"><div field="DTL_NM" name="DTL_NM" width="70" headerAlign="center" align="center" allowSort="false" renderer="onActionRenderer">大项</div><div field="MARKS" name="MARKS" width="70" headerAlign="center" align="center" allowSort="false" renderer="onRenderer" >分数</div><div field="DETAILED" name="DETAILED" width="100px" headerAlign="center" allowSort="false">明细项</div><div field="PLUS" name="PLUS" width="70" headerAlign="center"  allowSort="false" renderer="onActionRendererPlus">加分</div><div field="REDUCE" name="REDUCE" width="70" headerAlign="center"  allowSort="false" renderer="onActionRendererReduce">减分</div></div></div></div>

function onActionRenderer(e){var grid = e.sender;var record = e.record;var uid = record._uid;var rowData = grid.getRowByUID(uid);/* var s = rowData.DTL_NM;return s; */if(rowData.CD==11){var s = rowData.DTL_NM;return s;}if(rowData.CD==31){var s = rowData.DTL_NM;return s;}if(rowData.CD==41){var s = rowData.DTL_NM;return s;}if(rowData.CD==51){var s = rowData.DTL_NM;return s;}if(rowData.DTL_NM=="合计"){var s = rowData.DTL_NM;return s;}; }function onRenderer(e){var grid = e.sender;var record = e.record;var uid = record._uid;var rowData = grid.getRowByUID(uid);if(rowData.CD==11){var s = rowData.MARKS;return s;}if(rowData.CD==31){var s = rowData.MARKS;return s;}if(rowData.CD==41){var s = rowData.MARKS;return s;}if(rowData.DTL_NM=="合计"){var s = rowData.MARKS;return s;}; }function onActionRendererPlus(e) {var grid = e.sender;var record = e.record;var uid = record._uid;var rowData = grid.getRowByUID(uid);if(rowData.PLUS == "" && rowData.DETAILED!=""){var s = "";return s;}else if(rowData.DETAILED==""){var s = rowData.PLUS;return s;}else{var s = rowData.PLUS+"&nbsp;&nbsp;&nbsp;&nbsp;"+'<a href="javascript:editRow(\'' + uid + '\')">修改</a>';return s;};}function onActionRendererReduce(e) {var grid = e.sender;var record = e.record;var uid = record._uid;var rowData = grid.getRowByUID(uid);if(rowData.REDUCE == "" && rowData.DETAILED!=""){var s = "";return s;}else if(rowData.DETAILED==""){e.rowStyle = 'background-color:#FFC125';var s = rowData.REDUCE;return s;}else{var s = rowData.REDUCE+"&nbsp;&nbsp;&nbsp;&nbsp;"+'<a href="javascript:editRow(\'' + uid + '\')">修改</a>';return s;};}function editRow(row_uid) {var row = grid.getRowByUID(row_uid);//alert(row.CLASSIF);if (row) {editWindow.show();var form = new mini.Form("#editform");form.clear();//form.loading();$.ajax({url: "markWeightEquipment.do?method=markWeightEquipmentGet&CD="+row.CD,success: function (text) {form.unmask();var t = eval('('+text+')');//alert(t.REDUCE);if(t.PLUS != ""){t["VAL1"]=t.PLUS;$("#stringText").show();} else{t["VAL1"]=t.REDUCE;$("#stringText").show();} // console.log(t);form.setData(t);},error: function () {alert("表单加载错误");form.unmask();}});};}

miniUI合并居中详解相关推荐

减少HTTP请求之合并图片详解（大型网站优化技术）
一.相关知识讲解看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样 ...
java 输入流可以合并吗_Java 使用IO流实现大文件的分割与合并实例详解
java 使用IO流实现大文件的分割与合并文件分割应该算一个比较实用的功能,举例子说明吧比如说:你有一个3G的文件要从一台电脑Copy到另一台电脑, 但是你的存储设备(比如SD卡)只有1G ,这个时 ...
Word邮件合并功能详解：合并后生成多个word文档，删除空白页
Word邮件合并功能详解:合并后生成多个word文档,删除空白页最近在实习,干了很多打杂得工作,所以office软件用的很多很多,瞬间觉得自己可以去裸考计算机二级了哈哈哈哈哈哈.今天因为工作用到了邮 ...
站长在线Python精讲：在Python中使用split()方法分割、使用join()方法合并字符串详解
欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<在Python中使用split()方法分割.使用join()方法合并字符串详解>.本知识点主要内容有:在Python中使用s ...
python怎么去掉视频字幕_利用Python实现字幕挂载(把字幕文件与视频合并)思路详解...
其实超简单超简单!python好现成的库,一下子省略了好多步骤! 本文在Windows环境下!linux只是不需要手动输入imagicmagick的位置! 需要用到的环境 python(基本上只要不是 ...
linux paste 变量,Linux下的paste合并命令详解
paste单词意思是粘贴.该命令主要用来将多个文件的内容合并,与cut命令完成的功能刚好相反. 粘贴两个不同来源的数据时,首先需将其分类,并确保两个文件行数相同.paste将按行将不同文件行信息放在一 ...
html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧因为要做个网站, ...
【bzoj1486】【[HNOI2009]梦幻布丁】启发式链表合并（详解）
(画师当然是武内崇啦) Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1的四个布丁一共有3 ...
mysql 两张表合并查询_mysql中的分区表和合并表详解（一个常见知识点）
分区表是mysql5.1之后的新特性,合并表已经存在很长时间了.这篇文章主要介绍这两个概念以及他们基本的操作. 一.合并表合并表说实话是一种将要被淘汰的技术,但是掌握了合并表的概念再去看分区表就比较 ...

miniUI合并居中详解

miniUI合并居中详解相关推荐

最新文章

热门文章