jQuery MiniUI

标题: grid怎么动态生成表头 [打印本页]
作者: beijixiong2689    时间: 2017-2-28 18:54:08     标题: grid怎么动态生成表头

如图所示，后面的多表头的个数是不固定的，怎么动态生成！比如这是工作信息，还可能有生活信息等。这个需要根据后来传过来的格式生成
作者: jialiang    时间: 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.                           });
复制代码




欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2