easyUI 数据表格-datagrid

弗里曼的小伙伴 弗里曼的小伙伴 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.7k累计阅读 2.8k平均单平台 已同步平台 CSDN 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄19年
关注
原创 最新推荐文章于 2024-03-18 21:27:04 发布 2.7k 阅读 AI 写同款· GEO 优化 ›
AI权益加码！Claude Code、Cursor等20+工具免费用！ 购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！ 阅读详情

easyUI 数据表格-datagrid

sf2gis@163.com

2015年9月28日

 

1 目标：数据的表格展示，网页版excel（具有所有功能）。

2 原理：table的扩展封装。

3 流程：创建table，设置为easyui-datagrid。设置属性和数据。

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css" />

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table class="easyui-datagrid"data-options="fitColumns:true,singleSelect:true"style="width:200px;">

           <thead>

                 <tr>

                      <thdata-options="field:'code'">code</th>

                      <thdata-options="field:'name'">name</th>

                      <thdata-options="field:'price'">price</th>

                 </tr>

           </thead>

           <tbody>

                 <tr>

                      <td>01</td>

                      <td>02</td>

                      <td>03</td>

                 </tr>

                 <tr>

                      <td>11</td>

                      <td>12</td>

                      <td>13</td>

                 </tr>

           </tbody>

      </table>

</body>

</html>

4 方法

4.1 创建datagrid控件：填充table标签创建或使用js创建（推荐）。

由于JS创建能够设置复杂的样式，推荐使用js创建。

4.1.1直接填充table标签，生成easyui-datagrid样式

参见：流程：创建table，设置为easyui-datagrid。设置属性和数据。

4.1.2使用table标签的thead构建样式，使用JSON文件填充数据。

示例：使用table标签构建样式。

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<scripttype="text/javascript"src="js/highcharts.js"></script>

<scripttype="text/javascript"src="js/highcharts-3d.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="dg" class="easyui-datagrid"

           data-options="fitColumns:true,singleSelect:true,url:'/thbd/pages/BusinessStatistics/clsxxtj_data.json'"

           style="width: 100%;">

           <thead>

                 <tr>

                      <thdata-options="field:'cph'" style="width: 100px;">车牌号</th>

                      <thdata-options="field:'cpys'" style="width: 100px;">车牌颜色</th>

                      <thdata-options="field:'ssqy'" style="width: 100px;">所属企业</th>

                      <thdata-options="field:'sxzs'" style="width: 100px;">上线总数</th>

                      <thdata-options="field:'xxzs'" style="width: 100px;">下线总数</th>

                      <thdata-options="field:'cz',formatter:czRowFormatter"

                            style="width:100px;">操作</th>

                 </tr>

           </thead>

      </table>

      <script type="text/javascript">  

           //format cell to <a> with blue color and underline

           function czRowFormatter(value, row, index) {

                 return "<a href=''style='color:blue;text-decoration:underline;'>"

                            + value + "</a>";

           }

      </script>

</body>

</html>

//clsxxtj_data.json

{"total":4,"rows":[

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"0","xxzs":"36","cz":"查看"}

]}

 

4.1.3使用js构建样式，填充数据（推荐）。

方法：在html中构建table，使用js设置table的样式和数据。

设置样式Columns：参见复杂表头：多栏表头设计

示例：使用js创建表格。

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<scripttype="text/javascript"src="js/highcharts.js"></script>

<scripttype="text/javascript"src="js/highcharts-3d.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="dg" class="easyui-datagrid"style="width: 100%;"></table>

      <script type="text/javascript">

           $(document).ready(function() {

                 $('#dg').datagrid({

                      url:'/thbd/pages/BusinessStatistics/clsxxtj_data.json',

                      fitColumns:true,

                      columns:[[

                            {field:'cph',title:'车牌号',width:100},

                            {field:'cpys',title:'车牌颜色',width:100},

                            {field:'ssqy',title:'所属企业',width:100},

                            {field:'sxzs',title:'上线总数',width:100},

                            {field:'xxzs',title:'下线总数',width:100},

                            {field:'cz',title:'车牌号',width:100,formatter:czRowFormatter}

                      ]]

                 });

           });

          

           //format cell to <a> with blue color and underline

           function czRowFormatter(value, row, index) {

                 return "<a href=''style='color:blue;text-decoration:underline;'>"

                            + value + "</a>";

           }

      </script>

</body>

</html>

//clsxxtj_data.json

{"total":4,"rows":[

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"0","xxzs":"36","cz":"查看"}

]}

4.1.4示例：复杂表头

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css" />

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<scripttype="text/javascript"src="js/highcharts.js"></script>

<scripttype="text/javascript"src="js/highcharts-3d.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="dg" class="easyui-datagrid"style="width: 100%;"></table>

      <script type="text/javascript">

           $(document).ready(function() {

                 $('#dg').datagrid({

                      url:'/thbd/pages/BusinessStatistics/clsxxtj_data.json',

                      fitColumns:true,

                      columns:[

                            [

                             {title:'t1',colspan:3},

                             {title:'t2',colspan:3}

                            ],

                            [

                             {title:'t3',colspan:2},

                             {title:'t4',colspan:1}

                            ],

                            [

                                  {field:'cph',title:'车牌号',width:100},

                                  {field:'cpys',title:'车牌颜色',width:100},

                                  {field:'ssqy',title:'所属企业',width:100},

                                  {field:'sxzs',title:'上线总数',width:100},

                                  {field:'xxzs',title:'下线总数',width:100},

                                  {field:'cz',title:'车牌号',width:100,formatter:czRowFormatter}

                            ]

                      ]

                 });

 

           });

          

           //format cell to <a> with blue color and underline

           function czRowFormatter(value, row, index) {

                 return "<a href=''style='color:blue;text-decoration:underline;'>"

                            + value + "</a>";

           }

      </script>

</body>

</html>

//clsxxtj_data.json

{"total":4,"rows":[

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"0","xxzs":"36","cz":"查看"}

]}

4.2 设置表格属性：data-options

4.2.1根据内容自动调整网格宽度：fitColumns。如果为false，则超出大小时出现滚动条。

4.2.2单行选：singleSelect。

4.2.3增加复选框：checkbox。

参考：http://www.cnblogs.com/piaopiao7891/p/3180561.html

<thdata-options="field:'checked',checkbox:true" style="width:100px;"></th>

4.2.4自定义单元格格式：formatter。

目标：在填充数据时自动调用，返回格式的结果。

方法：formatter(value,rowData,index)。

value:字段值。

rowData:本行所有数据值。

index:行索引。

参考：http://www.bubuko.com/infodetail-286226.html

示例：

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<link rel="stylesheet"type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="t1" class="easyui-datagrid"

           data-options="fitColumns:true,singleSelect:true,url:'/thbd/pages/BusinessStatistics/tqjl_data.json'"

           style="width: 100%;">

           <thead>

                 <tr>

                      <thdata-options="field:'checked',checkbox:true"

                            style="width:100px;"></th>

                      <th data-options="field:'xh'"style="width: 100px;">序号</th>

                      <th data-options="field:'cph'"style="width: 100px;">车牌号</th>

                      <th data-options="field:'tqsj'"style="width: 100px;">提取时间</th>

                      <th data-options="field:'tqlx'"style="width: 100px;">提取类型</th>

                      <th data-options="field:'zlxfr'"style="width: 100px;">指令下发人</th>

                      <th data-options="field:'zt'"style="width: 100px;">状态</th>

                      <th data-options="field:'cz',formatter:rowFormatter"style="width: 100px;">操作</th>

                 </tr>

           </thead>

      </table>

      <script type="text/javascript">

           functionrowFormatter(value, row, index) {

                 console.debug(value);

                 console.debug(row);

                 console.debug(index);

                 return"<a href=''>" + value + "</a>";

           }

      </script>

</body>

</html>

4.3 设置数据：使用JSON数据文件填充（推荐），或使用table直接填充。

4.3.1使用JSON数据文件设置数据：设置url属性为JSON文件。此时忽略<tbody>。

JSON文件格式：单个对象，包括total和rows两个属性。数量使用total指定。数据行使用rows数组指定。每个row作为一个对象，表格列名为属性。

{"total":5,"rows":[

      {"code":"c","name":"sf","price":"100"},

      {"code":"cpp","name":"sf1","price":"200"},

      {"code":"csharp","name":"sf2","price":"300"},

      {"code":"java","name":"sf3","price":"400"},

      {"code":"python","name":"sf4","price":"500"}

]}

示例：使用JSON数据文件填充表格。

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<script type="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="t1" class="easyui-datagrid"

           data-options="fitColumns:true,singleSelect:true,url:'datagrid_data.json'"

           style="width: 200px;">

           <thead>

                 <tr>

                      <th data-options="field:'code'">code</th>

                      <thdata-options="field:'name'">name</th>

                      <thdata-options="field:'price'">price</th>

                 </tr>

           </thead>

      </table>

</body>

</html>

//datagrid_data.json

{"total":5,"rows":[

      {"code":"c","name":"sf","price":"100"},

      {"code":"cpp","name":"sf1","price":"200"},

      {"code":"csharp","name":"sf2","price":"300"},

      {"code":"java","name":"sf3","price":"400"},

      {"code":"python","name":"sf4","price":"500"}

]}

4.4复杂表头：多栏表头设计

目标：具有合并单元格等多种表头样式。

方法：

设置样式Columns：一个二维数组对象，每一个元素数组代表一行表头。元素数组中的每个对象表示一列，使用colspan表示占用几列（指最后一行的列数），rowspan表示占用几行（几个表头行）。

参考：http://blog.csdn.net/lishuangzhe7047/article/details/42743895

示例：双栏目表头

           //create datagrid

           //

           //@author:sf2gis@163.com

           //@date:2015-10-14 16:02

           function createDataGrid(tid, url, type) {

                 var frozenColumns = [ [ {

                      title : '序号',

                      field : 'xh',

                      width : 100

                 }, {

                      field : 'zz',

                      title : '组织',

                      width : 100

                 }, {

                      field : 'cph',

                      title : '车牌号',

                      width : 100

                 }, {

                      field : 'sj',

                      title : '司机',

                      width : 100

                 } ] ];

                 if (type != 0) {

                      frozenColumns[0].push({

                            field : 'rq',

                            title : '日期',

                            width : 100

                      })

                 }

                 var cols = {

                      fitColumns : true,

                       singleSelect: true,

                      url : url,

                      frozenColumns : frozenColumns,

                      columns : [ [ {

                            title : '超速',

                            colspan : 2

                      }, {

                            title : '急加速',

                            colspan : 2

                      }, {

                            title : '急减速',

                            colspan : 2

                      } , {

                            title : '疲劳驾驶',

                            colspan : 2

                      } , {

                            title : '空档滑行',

                            colspan : 2

                      } ,{

                            field : 'xskmcs',

                            title : '行驶开门次数',

                            width : 100,

                            rowspan:2

                      }, {

                            field : 'ffdh',

                            title : '非法点火',

                            width : 100,

                            rowspan:2

                      }, {

                            field : 'ffyw',

                            title : '非法移位',

                            width : 100,

                            rowspan:2

                      }, {

                            field : 'hj',

                            title : '合计',

                            width : 100,

                            rowspan:2

                      }, {

                            field : 'pm',

                            title : '排名',

                            width : 100,

                            rowspan:2

                      } ], [ {

                            field : 'cs-cs',

                            title : '次数',

                            width : 100

                      }, {

                            field : 'cs-sc',

                            title : '时长',

                            width : 100

                      }, {

                            field : 'jjs-cs',

                            title : '次数',

                            width : 100

                      }, {

                            field : 'jjs-sc',

                            title : '时长',

                            width : 100

                      }, {

                            field : 'jjians-cs',

                            title : '次数',

                            width : 100

                      }, {

                            field : 'jjians-cs',

                            title : '时长',

                            width : 100

                      }, {

                            field : 'pljs-cs',

                            title : '次数',

                            width : 100

                      }, {

                            field : 'pljs-sc',

                            title : '时长',

                            width : 100

                      }, {

                            field : 'kdhx-cs',

                            title : '次数',

                            width : 100

                      }, {

                            field : 'kdhx-sc',

                            title : '时长',

                            width : 100

                      }] ]

                 };

                 $(tid).datagrid(cols);

           }

5 示例

5.1 带有复选框的表格

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<script type="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="t1" class="easyui-datagrid"

           data-options="fitColumns:true,singleSelect:true,url:'/thbd/pages/BusinessStatistics/tqjl_data.json'"

           style="width: 100%;">

           <thead>

                 <tr>

                      <thdata-options="field:'checked',checkbox:true"

                            style="width:100px;"></th>

                      <thdata-options="field:'xh'" style="width: 100px;">序号</th>

                      <thdata-options="field:'cph'" style="width: 100px;">车牌号</th>

                      <thdata-options="field:'tqsj'" style="width: 100px;">提取时间</th>

                      <thdata-options="field:'tqlx'" style="width: 100px;">提取类型</th>

                      <thdata-options="field:'zlxfr'" style="width: 100px;">指令下发人</th>

                      <thdata-options="field:'zt'" style="width: 100px;">状态</th>

                      <thdata-options="field:'cz'" style="width: 100px;">操作</th>

                 </tr>

           </thead>

      </table>

</body>

</html>

//tqjl_data.json

{"total":4,"rows":[

      {"checked":false,"xh":"1","cph":"京APB－25415","tqsj":"100","tqlx":"100","zlxfr":"100","zt":"100","cz":"100"},

      {"checked":false,"xh":"2","cph":"京APB－25416","tqsj":"100","tqlx":"100","zlxfr":"100","zt":"100","cz":"100"},

      {"checked":true,"xh":"3","cph":"京APB－25417","tqsj":"100","tqlx":"100","zlxfr":"100","zt":"100","cz":"100"},

      {"checked":false,"xh":"4","cph":"京APB－25418","tqsj":"100","tqlx":"100","zlxfr":"100","zt":"100","cz":"100"}

]}

 

5.2 使用table填充：填充tbody

参见：流程：创建table，设置为easyui-datagrid。设置属性和数据。

6 属性表格：easyui-propertygrid,datagrid的派生类。

6.1 目标：设置具有key-value格式的表格。

6.2 原理：扩展datagrid。

6.3 方法：

6.3.1创建表格：js创建或表格填充（同datagrid）。

6.3.2表头显示：showHeader。

6.3.3分组显示：showGroup。

6.3.4编辑框类型：editor。可以有多种类型，options属性用于设置不同类型对应的属性（此类型控件的属性）。

6.3.4.1  combobox：候选项使用data指定，数据值valueField,显示值textField。

           {

                 "name":"SSN",

                 "value":"123-456-7890",

                 "group":"ID Settings",

                 "editor":{

                      "type":"combobox",

                      "options":{

                            "data":[{"label":"java","value":"j"},{"label":"javascript","value":"js"},{"label":"c++","value":"c"}],

                            "valueField":"value",

                            "textField":"label"

                      }

                     

                 }

6.3.4.2  validbox：验证类型validType。

{

                 "name":"Email",

                 "value":"bill@gmail.com",

                 "group":"Marketing Settings",

                 "editor":{

                      "type":"validatebox",

                      "options":{

                            "validType":"email"

                      }

                     

                 }

                

           }

          

6.3.4.3  checkbox：选中on/off。

           {

                 "name":"Address",

                 "value":"0",

                 "group":"ID Settings",

                 "editor":{

                      "type":"checkbox",

                      "options":{

                            "on":"kai",

                            "off":"guan"

                      }

                     

                 }

                

           },

6.3.4.4  numberbox：最大值最小值max,min。

 

           {

                 "name":"age",

                 "value":"31",

                 "group":"ID Settings",

                 "editor":{

                      "type":"numberbox",

                      "options":{

                            "min":18,

                            "max":100

                      }    

                  }

                     

                

           },

6.3.5表头设置：宽度、内容

columns属性设置，一般设置field为value,和name。

columns:[[{field:'name',title:'aaaa'},{field:'value',title:'bbbbbbb',width:'100px'}]],

6.4 示例

6.4.1示例：控制属性表格。

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<link rel="stylesheet"type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <a id="addRow" class="easyui-linkbutton"style="width: 100px;">addRow</a>

      <a id="showHeader"class="easyui-linkbutton" style="width:100px;">showHeader</a>

      <a id="hideHeader"class="easyui-linkbutton" style="width:100px;">hideHeader</a>

      <a id="showGroup"class="easyui-linkbutton" style="width:100px;">showGroup</a>

      <a id="hideGroup"class="easyui-linkbutton" style="width:100px;">hideGroup</a>

      <table id="pg"class="easyui-propertygrid" style="width:300px"></table>

      <script type="text/javascript">

           $(document).ready(function() {

                 console.debug($('#pg').propertygrid());

                 $('#pg').propertygrid({

                      url : '/thbd/pages/xtgl/xtgl_cssz_data.json',

                      showGroup : true,

                      scrollbarSize : 0

                 });

                 $('#pg').propertygrid({onLoadSuccess:function(e){

                      var row = {

                            name : 'addAddress',

                            value : 'xx222',

                            group : 'yyyy',

                            editor : 'checkbox'

                      };

                      $('#pg').propertygrid('appendRow', row);

                      $('#pg').propertygrid('resize', null);

                 }});

                 $('#addRow').click(function(e) {

                      var row = {

                            name : 'AddName',

                            value : 'xx',

                            group : 'Marketing Settings',

                            editor : 'text'

                      };

                      $('#pg').propertygrid('appendRow', row);

                 });

                 $('#showHeader').click(function(e){$('#pg').propertygrid({showHeader:true});});

                 $('#hideHeader').click(function(e){$('#pg').propertygrid({"showHeader":false});});

                 $('#showGroup').click(function(e){$('#pg').propertygrid({"showGroup":true});});

                 $('#hideGroup').click(function(e){$('#pg').propertygrid({"showGroup":false});});

           });

      </script>

 

</body>

</html>

6.4.2示例：属性表格编辑器。

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <a id="addRow" class="easyui-linkbutton"style="width: 100px;">addRow</a>

      <a id="showHeader"class="easyui-linkbutton" style="width:100px;">showHeader</a>

      <a id="hideHeader"class="easyui-linkbutton" style="width:100px;">hideHeader</a>

      <a id="showGroup"class="easyui-linkbutton" style="width:100px;">showGroup</a>

      <a id="hideGroup"class="easyui-linkbutton" style="width:100px;">hideGroup</a>

      <table id="pg"class="easyui-propertygrid" style="width:300px"></table>

      <script type="text/javascript">

           $(document).ready(function() {

                 console.debug($('#pg').propertygrid());

 

                 $('#pg').propertygrid({

                      url : '/thbd/pages/xtgl/xtgl_cssz_data.json',

                      showGroup : true,

                      scrollbarSize : 0

                 });

 

                 $('#pg').propertygrid({onLoadSuccess:function(e) {

                      var row = {

                            name : 'addAddress',

                            value : 'xx222',

                            group : 'yyyy',

                            editor : 'checkbox'

                      };

                      $('#pg').propertygrid('appendRow', row);

                      $('#pg').propertygrid('resize', null);

                 }});

                 $('#addRow').click(function(e) {

                      var row = {

                            name : 'AddName',

                            value : 'xx',

                            group : 'Marketing Settings',

                            editor : 'text'

                      };

                      $('#pg').propertygrid('appendRow', row);

                 });

                 $('#showHeader').click(function(e){$('#pg').propertygrid({showHeader:true});});

                 $('#hideHeader').click(function(e){$('#pg').propertygrid({"showHeader":false});});

                 $('#showGroup').click(function(e){$('#pg').propertygrid({"showGroup":true});});

                 $('#hideGroup').click(function(e){$('#pg').propertygrid({"showGroup":false});});

           });

      </script>

 

</body>

</html>

//xtgl_cssz_data.json

{

      "total":4,

      "rows":[

           {

                 "name":"Name",

                 "value":"Bill Smith",

                 "group":"ID Settings",

                 "editor":"text"

           },{

                 "name":"Address",

                 "value":"0",

                 "group":"ID Settings",

                 "editor":{

                      "type":"checkbox",

                      "options":{

                            "on":"kai",

                            "off":"guan"

           }}},{

                 "name":"SSN",

                 "value":"123-456-7890",

                 "group":"ID Settings",

                 "editor":{

                      "type":"combobox",

                      "options":{

                            "data":[{"label":"java","value":"j"},{"label":"javascript","value":"js"},{"label":"c++","value":"c"}],

                            "valueField":"value",

                            "textField":"label"

           }}},{

                 "name":"age",

                 "value":"31",

                 "group":"ID Settings",

                 "editor":{

                      "type":"numberbox",

                      "options":{

                            "min":18,

                            "max":100

           }}},{

                 "name":"birth",

                 "value":"",

                 "group":"ID Settings",

                 "editor":"datebox"

           },{

                 "name":"Email",

                 "value":"bill@gmail.com",

                 "group":"Marketing Settings",

                 "editor":{

                      "type":"validatebox",

                      "options":{

                            "validType":"email"

                 }}}

          

      ]

     

}

6.4.3示例：属性表格表头控制。

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<script type="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="pg"class="easyui-propertygrid" style="width:536px"></table>

      <script type="text/javascript">

           $(document).ready(function() {

                 console.debug($('#pg').propertygrid());

 

                 $('#pg').propertygrid({

                      url : '/thbd/pages/xtgl/xtgl_cssz_data.json',

                      scrollbarSize : 0,

                      columns:[[{field:'name',title:'aaaa'},{field:'value',title:'bbbbbbb',width:'100px'}]],

                      showHeader:false,

                      showGroup:false

                 });

           });

      </script>

 

</body>

</html>

 

//xtgl_cssz_data.json

{

      "total":4,

      "rows":[

           {

                 "name":"兴趣点默认展现",

                 "value":"展现",

                 "group":"cssz",

                 "editor":{

                      "type":"checkbox",

                      "options":{

                            "on":"展现",

                            "off":"不展现"

                      }

                 }               

           },

           {

                 "name":"实时告警列表最大记录数（1～10000）",

                 "value":"5000",

                 "group":"cssz",

                 "editor":{

                      "type":"numberbox",

                      "options":{

                            "min":1,

                            "max":10000

                      }

                 }

           },

           {

                 "name":"实时数据列表最大记录数（1～10000）",

                 "value":"5000",

                 "group":"cssz",

                 "editor":{

                      "type":"numberbox",

                      "options":{

                            "min":1,

                            "max":10000

                      }

                 }

           },

           {

                 "name":"实时告警、实时数据、轨迹回放中数据列表默认高度（记录数）（1～20）",

                 "value":"10",

                 "group":"cssz",

                 "editor":{

                      "type":"numberbox",

                      "options":{

                            "min":1,

                            "max":20

                      }

                 }

           }         

      ]

}

收录于
WEB

当前文章被收录于：

WEB
26 篇文章 0 人学习
订阅专栏 查看详情
标签
#jquery #easyui #javascript #前端
本内容遵循 CC 4.0 BY-SA 版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
easyUI之datagrid（数据表格）使用，前端高级工程师面试实战 编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。 阅读详情

相关推荐

easyui超漂亮前端模板，兼容IE6

非常好看的后台管理系统easyui前端模板，可直接套用，包括了首页面菜单、树、表格、图片表格，主题切换等功能

easyui 动态设置单元格控件_比Excel还简单，实现动态报表原来只需要十分钟！

做过报表的人，尤其是经常有报表需求的人，想必都会有这样一个困惑：为什么同样是做报表，其他人的报表就能够得到领导的肯定，而自己的报表就会被老板丢掉一边？这个问题其实很好回答，你想一想，如果你是老板，当你想要看一份销售量统计图的时候，摆在你面前的是这样一张报表，你还有仔细看下去的耐心吗？没有！连看下去的欲望都没犹豫，更不要说用这样的报表为下半年的营销策划做分析决策了！报表最根本的目的就是要传达数据信息...

weixin_39894914的博客 320

easyui使用datagrid定制生成一个table

1.easyui使用datagrid定制生成一个table,1.数据绑定2.DataGrid的增改删功能3.DataGrid的分页实现4.DataGrid的样式设计先上一张截图，让你大概知道自己需要的功能是否在这张图里有所实现。

easyui datagrid数据表格(一)

easyui 中的数据表格，功能齐全，强大。对于表格数据操作提供了很多方法。具体全部属性可参考easyui官网。这里直说一些我在项目中使用到的属性，方法与事件。 数据表格的创建很简单。也有两种方法。 （1）html创建方法：<table class='easyui-datagrid'></table>(2)js创建方法<!--html部分--> <table id='dg'></

前端小白 668

JQuery Easy Ui dataGrid 数据表格

数据表格 - DataGrid 内容 概况 使用方法 数据表格属性 数据列属性 编辑 数据视图 事件 方法  继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。. 数据表格显示的数据以表格的形式，并提供了丰富的选择，排序，分组和编辑数据的支持。这个数据表格被设计以缩短开发时间，并要求开发商没有具体的知识。它是轻量级的，功能丰

码农的技术专栏 2273

easyUI之datagrid（数据表格）使用

‘">’,**在界面中添加数据表格添加相关依赖每个表都需要建立相应的js建立book.js将demo文件中的datagrid.data1.json复制到WebContent目录下book.js代码如下：/*** 注意：js文件中不支持el表达式*/columns:[[{field:‘productname’,title:‘名称’,width:100},{field:‘unitcost’,title:‘价格’,width:100,align:‘right’}]]});})

1381

Easyui中DataGrid（数据表格）

Easyui中DataGrid（数据表格）1.DataGrid简介2.实现过程2.1jsp页面的代码块（两种方式）第一种第二种3.DataGrid属性4.实践操作4.1界面创建4.2js文件4.3界面效果(此为最简易版本)5.总结 1.DataGrid简介 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 2.实

Smootht的博客 1180

jQuery Easyui datagrid 数据表格的使用

jQueryEasyuidatagrid数据表格的使用 1、 在页面显示表格的位置 提供<table>标签，指定 id 元素 2、 在 JS 代码 $(“#grid”).datagrid({…}); 完成对表格设置 表格列定义 远程数据加载 分页 顶部工具栏 代码效果 ...

qq_40208605的博客 743

easyui DataGrid 数据表格 属性

easyui DataGrid 数据表格 属性

jules12345678的博客 154

EasyUi之DataGrid（数据表格）

目录简介使用案例实现查询功能总结 简介 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 使用案例 1、从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。 <table class="easyui-datagrid"> <thead>

hhhhhhhhzsw的博客 704

easyui—DataGrid（数据表格）

目录 一.DataGrid（数据表格） 一.DataGrid（数据表格） DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。 使用案例 1.从现有的表格元素创建DataGrid，在HTML中定义列、行和数据 <table class="easyui-datagrid"> <thead> <tr> .

qq_67785529的博客 4860

easyUI -datagrid表格数据不显示

出现easyUI -datagrid表格数据无法显示这种情况的可能原因有多方面的，可能是因情况而异吧，现在说一下日常做项目中我遇到过的这几个方面（原因二是我遇到过的，在网上看到也是常有的） 前提： 在写好jsp页面代码和后台查询数据库代码后，项目可以运行，发现datagrid中显示空白，Chrome浏览器的Developer Tools中没有报错，后台也能打印出后台传递到前台的json字符串。 原因一： datagrid只显示表头，无法显示表格数据，即出现如下图的情况： 即所需要渲染的表格只出现了表头，表

weixin_44543412的博客 4247

五、easyUI中的datagrid（数据表格）组件

五、easyUI中的datagrid（数据表格）组件

weixin_44230693的博客 7175

EasyUi之DataGrid（数据表格）实现增加、修改、删除

目录前言增加、修改、删除测试结果 前言 通过我们上一篇博客里的DataGrid实现了我们的查询，今天我们将要做的就是增加、修改、删除。 增加、修改、删除 我将增加和修改的方法合成为一个. Dao方法 // 增加 public int add(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { // pinyin

hhhhhhhhzsw的博客 1980

EasyUI使用DataGrid数据表格实现增删改查

目录前言增加、修改功能的实现步骤三级目录 前言 接前文，已经用EasyUI的DataGrid组件实现了查询数据渲染的功能，这篇博文给大家分享下增删改的实现 增加、修改功能的实现步骤 先介绍一下增加功能的实现： 利用dialog组件进行同一页面增加，这个组件和模态框一个道理，只不过EasyUI的样式不太美观，引用： 要进行动态的页面传递数据到后台，那么给前文的增加按钮绑定事件: // 给新增按钮绑定点击事件 $("#btn-add").click(function() { $("#dd").dia

Dawn.x的博客 1311

easyui数据表格显示复选框_EasyUI DataGrid 复选框

使用checkbox，用户可以选定/取消数据行。添加checkbox列，我们简单的添加列的checkbox属性，并且设置为true。代码像这样：$('#tt').datagrid({title:'CheckboxSelect',iconCls:'icon-ok',width:600,height:250,url:'datagrid_data.json',idField:'itemid',colu...

weixin_42311115的博客 2481
上一篇： 基于jQury的UI框架 easyUI
下一篇： JavaEE
点赞 0
评论 0
书签 书签 0
弗里曼的小伙伴
弗里曼的小伙伴
博客等级 码龄19年 233粉丝 172原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

弗里曼的小伙伴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值