（札记）EasyUI Grid

不念不忘少年蓝@ 2022-08-06 06:15 8阅读 0赞

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" οnclick="newUser()">New User</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
          <label>搜索:</label>
          <input type="text" style="width:120px"/>
          <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" οnclick="searchUser()">Search User</a>
        </div>
    
    </body>
    </html>

![SouthEast][]

[SouthEast]: /images/20220806/8a3ed71774ad4aaea7522306e29b51aa.png