（札记）EasyUI Grid

最新推荐文章于 2023-05-24 11:25:02 发布

原创最新推荐文章于 2023-05-24 11:25:02 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #Grid

jQuery & EasyUI 专栏收录该内容

7 篇文章

订阅专栏

本文详细探讨了EasyUI的Grid组件，介绍了其关键属性的使用方法，为开发者提供了一个全面的理解，帮助他们在项目中更好地集成和操作数据表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用easyui创建grid数据表格由两个方式，

1.1、使用DIV编写

1.2、直接在jquery入口方法中写

2、使用jquery中实现grid的缺点，不够灵活。

3、datagrid的数据绑定是个很郁闷的问题。

它只提供一个url的属性

json的数据格式必须是：tatol 和 rows

4、toolbar里面，默认只能添加按钮。如果做查询，可使用的方式有两种：

4.1、重写toolbar，（如下方例子中的第二段代码。）

4.2、将搜索部分重新用一个div来实现。（使用border布局，增加一个north面板，style="overfolw:hidden;"）

用到的属性：

//用到的属性：
$('#datagrid').datagrid({ 
url:"http://localhost:8080/mew/testCm!listTest.action",//加载数据的url地址
fit:true,//自动填充满
border:false,//去除边框
pagination:true,//分页栏
pageSize:10,//默认选择项
pageList:[10,20,50,100],//下拉框数值
rownumbers:true,//显示行号
fitColumns:false,//是否固定单元格的宽度（缩小浏览器的时候是否出现滚动条）
singleSelect:true,//只允许单选
idField:'ID',//用于记录选中的行号
toolbar:[{}],//有两种写法，1:应用id号，如'#toolbar';2、写类的放方式
columns:[[{
    field:'testCm.id',//列字段名字
    title:'ID',//列标题文本
    width:100,//列的宽度
    align:'center',//列的对齐方式
    sortable:true,//是否排序
    rowspan：2,//占用N行单元格
    colspan: 1,//占用M列单元格
    hidden：false,//是否隐藏该列
    checkbox：true,//是否使用复选框
    formatter：function(){},//单元格格式化方法(如：截取部分时间)
    styler：function(){},//单元格的
},{},{}]]//列模型
}）

注：以下例子不带数据

注：以下例子不带数据
<html>
<head>
  <script type="text/javascript">
    $(function(){
      var datagrid;
      $('#datagrid').datagrid({
        url:"testCm!listTest.action",
        fit:true,//自动填充满
         border:false,//去除边框
         pagination:true,//分页栏
         pageSize:10,//默认选择项
         pageList:[10,20,50,100],//下拉框数值
         rownumbers:true,
        fitColumns:false,
        singleSelect:true,
        idField:'ID',
        toolbar:[{iconCls: 'icon-add',
          text:'New User',
          handler: function(){alert('add编辑按钮')}
        },{
          iconCls: 'icon-edit',
          text:'Edit User',
          handler: function(){alert('edit编辑按钮')}
        },{
          iconCls: 'icon-remove',
          text:'Remove User',
          handler: function(){alert('remove编辑按钮')}
        },{
          iconCls: 'icon-search',
          text:'Search User',
          handler: function(){alert('search编辑按钮')}
        }],
        columns:[[
          {field:'testCm.id',title:'ID',width:100,align:'center'},
          {field:'testCm.passtime',title:'Passtime',width:100,align:'center'},
          {field:'testCm.cpys',title:'cpys',width:100,align:'center'},
          {field:'testCm.cphm',title:'cphm',width:100,align:'center'},
          {field:'testCm.csys',title:'csys',width:100,align:'center'},
          {field:'testCm.ckFlag',title:'ckFlag',width:100,align:'center'}
        ]]
      });
    })
  </script>
</head>
<body>
    <table id="datagrid"></table>
</body>
</html>
上面是toolbar的一种实现方式，下面是另一种：
<html>
<head>

  <script type="text/javascript">
    $(function(){
      var datagrid;
      $('#datagrid').datagrid({
        url:"testCm!listTest.action",
        fit:true,//自动填充满
         border:false,//去除边框
         pagination:true,//分页栏
         pageSize:10,//默认选择项
         pageList:[10,20,50,100],//下拉框数值
         rownumbers:true,
        fitColumns:false,
        singleSelect:true,
        idField:'ID',
        toolbar: '#toolbar',
        columns:[[
          {field:'testCm.id',title:'ID',width:100,align:'center'},
          {field:'testCm.passtime',title:'Passtime',width:100,align:'center'},
          {field:'testCm.cpys',title:'cpys',width:100,align:'center'},
          {field:'testCm.cphm',title:'cphm',width:100,align:'center'},
          {field:'testCm.csys',title:'csys',width:100,align:'center'},
          {field:'testCm.ckFlag',title:'ckFlag',width:100,align:'center'}
        ]]
      });
    })
  </script>
</head>
<body>
    <table id="datagrid"></table>
    <div id="toolbar">
      <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
      <label>搜索:</label>
      <input type="text" style="width:120px"/>
      <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchUser()">Search User</a>
    </div>

</body>
</html>