博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
easyui中datagrid用法,加载table数据与标题
阅读量:6476 次
发布时间:2019-06-23

本文共 3048 字,大约阅读时间需要 10 分钟。

加载标题写法:

多行标题:columns: [[

    columns: [[
                       { field: 'itemid', title: 'Item ID', rowspan: 2, width: 80, sortable: true },
                       { field: 'productid', title: 'Product ID', rowspan: 2, width: 80, sortable: true },
                       { title: 'Item Details', colspan: 4 }
                       ], [
                      { field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true },
                       { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true },
                       { field: 'attr1', title: 'Attribute', width: 100 },
                       { field: 'status', title: 'Status', width: 60 }
                       ]]

单行标题用Js实现:

$('#tt').datagrid({

columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 80 },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right' },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
{ field: 'attr1', title: 'Attribute', width: 100 },
{ field: 'status', title: 'Status', width: 60 }
]]
});

实现一个table的数据加载例子:

静态:   

 var data_ = [{

            "dataindex0": "1",

            "dataindex1": "Y08",

            "dataindex2": "Y00000000158",

            "dataindex3": "注",

            "dataindex4": "Z",

            "dataindex5": "注",

            "dataindex6": "250",

            "dataindex7": "东北厂",

            "dataindex8": "国",

            "dataindex9": "123123",

            "dataindex10": null,

            "dataindex11": null,

            "dataindex12": null,

            "dataindex13": null

        },

       {

            "dataindex0": "1",

            "dataindex1": "Y08",

            "dataindex2": "Y00000000158",

            "dataindex3": "注",

            "dataindex4": "Z",

            "dataindex5": "注",

            "dataindex6": "250",

            "dataindex7": "东北厂",

            "dataindex8": "国",

            "dataindex9": "123123",

            "dataindex10": null,

            "dataindex11": null,

            "dataindex12": null,

            "dataindex13": null

        }];

   方法一:

 $('#dg').datagrid({

        fit: true,

        checkOnSelect: true,

        selectOnCheck: true,

        singleSelect: true,

        fitColumns: true,

        data:data_,

        //pageSize:100,

        //pagination:true,

        columns: [[

            { field: 'dataindex0', title: 'dataindex0', width: 80 },

            { field: 'dataindex1', title: 'dataindex1', width: 80 },

            { field: 'dataindex2', title: 'dataindex2', width: 80 },

            { field: 'dataindex3', title: 'dataindex3', width: 80 },

            { field: 'dataindex4', title: 'dataindex4', width: 80 },

            { field: 'dataindex5', title: 'dataindex5', width: 80 },

            { field: 'dataindex6', title: 'dataindex6', width: 80 },

            { field: 'dataindex7', title: 'dataindex7', width: 80 },

            { field: 'dataindex8', title: 'dataindex8', width: 80 },

            { field: 'dataindex9', title: 'dataindex9', width: 80 }

        ]]

    });

方法二:

 $('#dg').datagrid({

        fit: true,

        checkOnSelect: true,

        selectOnCheck: true,

        singleSelect: true,

        fitColumns: true,

        //pageSize:100,

        //pagination:true,

        columns: [[

            { field: 'dataindex1', title: 'dataindex1', width: 80 },

            { field: 'dataindex2', title: 'dataindex2', width: 80 },

            { field: 'dataindex3', title: 'dataindex3', width: 80 },

            { field: 'dataindex4', title: 'dataindex4', width: 80 },

            { field: 'dataindex5', title: 'dataindex5', width: 80 },

            { field: 'dataindex6', title: 'dataindex6', width: 80 },

            { field: 'dataindex7', title: 'dataindex7', width: 80 },

            { field: 'dataindex8', title: 'dataindex8', width: 80 },

            { field: 'dataindex9', title: 'dataindex9', width: 80 },

            { field: 'dataindex10', title: 'dataindex10', width: 80 }

        ]]

    });

转载地址:http://vbmko.baihongyu.com/

你可能感兴趣的文章
第 1 章 虚拟化 - 008 - LVM 类型的 Storage Pool
查看>>
kettle-Excel输入
查看>>
380. Insert Delete GetRandom O(1)
查看>>
Linux下的tar压缩解压缩命令详解
查看>>
vue 2.0 打包的时候去除掉 .map 文件
查看>>
转:jQuery对象与dom对象的联系、区别和转换
查看>>
Codeforces Round #449 (Div. 2)C. Nephren gives a riddle
查看>>
安装使用pyclone进行克隆演化推断
查看>>
HTML+CSS 学习清单
查看>>
DH 密钥交换算法
查看>>
UML作业第四次:分析系统,绘制活动图
查看>>
Struts2 if标签
查看>>
MyBatis之Mapper XML 文件详解(三)-Result Maps
查看>>
数据结构 -- 静态链表
查看>>
VIMTUTOR《VIM教程》
查看>>
200行代码搞定炸金花游戏(PHP版)
查看>>
REST
查看>>
log4net日志分割,按大小分割
查看>>
Dota Funny Time 第四十七弹
查看>>
HDU 3746 Cyclic Nacklace(KMP+最小循环节)题解
查看>>