jQuery MiniUI

 找回密码
 立即注册
查看: 4573|回复: 1
打印 上一主题 下一主题

grid怎么动态生成表头 [复制链接]

Rank: 3Rank: 3

跳转到指定楼层
楼主
发表于 2017-2-28 18:54:08 |只看该作者 |倒序浏览
如图所示,后面的多表头的个数是不固定的,怎么动态生成!比如这是工作信息,还可能有生活信息等。这个需要根据后来传过来的格式生成

Rank: 8Rank: 8

沙发
发表于 2017-3-1 09:33:16 |只看该作者
这里是我们动态生成表格的示例,你可以参考一下:http://www.miniui.com/demo/#src=datagrid/setcolumns.html

也有生成多级表头的:
  1. <a class="mini-button" onclick="creatgrid">动态创建表格</a>
  2.           <div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" url="../demo/data/AjaxService.aspx?method=SearchEmployees" multiSelect="true">
  3.           </div>
  4.           <script>
  5.                   mini.parse();
  6.                   var datagrid = mini.get("datagrid1");
  7.                   datagrid.load();
  8.                   function creatgrid() {
  9.                           datagrid.set({
  10.                                   columns: [
  11.                                            { type: "checkcolumn" },
  12.                                            { field: "loginname", width: "120", headerAlign: "center", allowSort: "true", header: "员工账号" },
  13.                                                    { field: "name", width: "120", headerAlign: "center", allowSort: "true", header: "姓名" },
  14.                                                    { header: "工作信息", columns: [
  15.                                                        { field: "dept_name", width: "120", header: "所属部门" },
  16.                                                        { field: "position_name", width: "100", header: "职位" },
  17.                                                        { field: "salary", dataType: "currency", currencyUnit: "¥", align: "right", width: "100", allowSort: "true", header: "薪资" }
  18.                                                    ]
  19.                                                    },
  20.                                                    { field: "createtime", width: "100", headerAlign: "center", allowSort: "true", dateFormat: "yyyy-MM-dd", header: "创建日期" },
  21.                                                    { field: "gender", width: "100",header: "性别", renderer:onGenderRenderer},
  22.                                                    { field: "age", width: "120", header: "年龄" },
  23.                                                    { field: "birthday", width: "120", renderer:onBirthdayRenderer, header: "生日"},
  24.                                                    { field: "email", width: "120", header: "邮箱" }
  25.                                    ]
  26.                           });
复制代码

Archiver|普加软件

GMT+8, 2025-7-10 02:02 , Processed in 1.025530 second(s), 9 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部