Jqueryeasy ui 的用户列表 datagrid 控件

用户列表datagrid（重点 动态实现）

Datagrid：数据列表 自带分页

区域(title tabs content  )

系统dome

$(function(){

           $('#test').datagrid({

              title:'My Title',

              iconCls:'icon-save',

              width:600,

              height:350,

              nowrap:false,//单元格的内容不换行（加载性能高），如果为true 则表示不换行，如果为false 则换行

              striped:true,//是否隔行显示条纹效果

              collapsible:true,//是否可以折叠

              url:'datagrid_data.json',//加载的数据json 格式

              sortName:'code',//排序的名称

              sortOrder:'desc',//排序的方式

              remoteSort:false,//是否远程排序（远程排序则是全数据库数据排序，不远程排序为当前表格数据排序默认用远程）

               idField:'code',//数据结果集的主键（唯一约束），如果错误会影响获取选中行的执行

              frozenColumns:[[//冻结列就是移动表格始终固定不动

                    {field:'ck',checkbox:true},

                    {title:'code',field:'code',width:80,sortable:true}

              ]],

              columns:[[//普通列

                   {title:'Base Information',colspan:3},

                  {field:'opt',title:'Operation',width:100,align:'center',rowspan:2,

                     formatter:function(value,rec){

                         return '<spanstyle="color:red">Edit Delete</span>';

                     }

                  }

              ],[

                  {field:'name',title:'Name',width:120},

                  {field:'addr',title:'Address',width:120,rowspan:2,sortable:true,

                     sorter:function(a,b){

                         return (a>b?1:-1);

                     }

                  },

                  {field:'col4',title:'Col41',width:150,rowspan:2}

              ]],

              pagination:true,//是否显示分页

              rownumbers:true,//是否显示行号

              toolbar:[{//工具栏

                  id:'btnadd',

                  text:'Add',

                  iconCls:'icon-add',

                  handler:function(){

                     $('#btnsave').linkbutton('enable');

                     alert('add')

                  }

              },{

                  id:'btncut',

                  text:'Cut',

                  iconCls:'icon-cut',

                  handler:function(){

                     $('#btnsave').linkbutton('enable');

                     alert('cut')

                  }

              },'-',{

                  id:'btnsave',

                  text:'Save',

                  disabled:true,

                  iconCls:'icon-save',

                  handler:function(){

                     $('#btnsave').linkbutton('disable');

                      alert('save')

                  }

              }]

           });

           var p = $('#test').datagrid('getPager');

           if (p){

              $(p).pagination({

                  onBeforeRefresh:function(){

                     alert('before refresh');

                  }

              });

           }

       });

Datagrid数据格式  

total数据列表的总数（不是当前列表的数量）

Rows 每一行的数据 数组中是json

{                                                     

       "total":239,                                                     

       "rows":[                                                         

              {"code":"001","name":"Name1","addr":"Address 11","col4":"col4data"},        

              {"code":"002","name":"Name2","addr":"Address 13","col4":"col4data"},        

              {"code":"003","name":"Name3","addr":"Address 87","col4":"col4data"},        

              {"code":"004","name":"Name4","addr":"Address 63","col4":"col4 data"},        

              {"code":"005","name":"Name5","addr":"Address 45","col4":"col4data"},        

]                                                         

}        

 

 

 

在系统中的应用

抽取了工具栏toolbar和列columns （formatter重新定义单元格内容）

<script type="text/javascript">

   //datagrid 列的定义

    var columns_v = [ [ {

        field : 'userid',//对应json中的key

        title : '账号',

        width : 120

    }, {

        field : 'username',//对应json中的key

        title : '名称',

        width : 120

    }, {

        field : 'groupid',//对应json中的key

        title : '用户类型',

        width : 120,

        formatter : function(value, row, index) {//通过此方法格式化显示内容,value表示从json中取出该单元格的值，row表示这一行的数据，是一个对象,index:行的序号

            if(value =='1'){

                return "卫生局";

            }else if(value =='2'){

                return "卫生院";

            }else if(value =='3'){

                return "卫生室";

            }else if(value =='4'){

                return "供货商";

            }else if(value =='0'){

                return "系统管理员";

            }

        }

    }, {

        field : 'sysmc',//对应json中的key

        title : '所属单位',

        width : 120

       

    }, {

        field : 'userstate',//对应json中的key

        title : '状态',

        width : 120,

        formatter : function(value, row, index) {//通过此方法格式化显示内容,value表示从json中取出该单元格的值，row表示这一行的数据，是一个对象,index:行的序号

            if(value =='1'){

                return "正常";

            }else if(value =='0')

            {return "暂停";  }

                     

        }

    } ] ];

 

    //datagrid 的工具栏

    var toolbar_v = [ {

        //工具栏

        id : 'btnadd',

        text : '添加',

        iconCls: 'icon-add',

        handler : function() {

        //打开一个窗口添加用户界面

        //参数窗口的title   宽高  url地址

        createmodalwindow("添加用户信息",800,250,"${baseurl}user/addsysuser.action");

        }

    } ];

 

    //加载datagrid

    $(function() {

        $("#sysuserlist").datagrid({

            title : '用户查询',//数据列表标题

            nowrap : true,//单元格中的数据不换行，如果为true表示不换行，不换行情况下数据加载性能高，如果为false就是换行，换行数据加载性能不高

            striped : true,//条纹显示效果

            url : '${baseurl}user/queryuser_result.action',//加载数据的连接，引连接请求过来是json数据

            idField : 'id',//此字段很重要，数据结果集的唯一约束(重要)，如果写错影响获取当前选中行的方法执行

            loadMsg : '',

            columns : columns_v,

            pagination : true,//是否显示分页

            rownumbers : true,//是否显示行号

            pageList : [ 15, 30, 50],

            toolbar : toolbar_v

        });

    });  

 

引用：

    <table id="sysuserlist"></table>