(札记)EasyUI Grid

本文详细探讨了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>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值