Easyui Datagrid封装

2017-03-17

使用easyui datagrid部分，因为每次用到都会写一堆公共代码，显得代码比较冗长，封装可以稍微精简点，直接调用封装好的方法即可

easyui datagrid调用封装方法

1	<table id="box1"><table>

var serUser = {
             data_opt : {
                "sortName":"id",
                "sortOrder":"desc"
             },
            domId:$('#box1'),
            toolbar:'.User_details',
            url :  'json/datagrid1.json',
            cols : [[
            {field : 'user', title : '用户名称', resizable:false,width : 100},
            {field : 'login_user', title : '登陆名称', width : 100, resizable:false},
            {field : 'sex', title : '性别', width : 100, resizable:false},
            {field : 'email', title : '邮箱', width : 100, resizable:false},
            {field : 'tel', title : '电话', width : 100, resizable:false},
            {field : 'phone', title : '分机', width : 100, resizable:false},
            {field : 'mobile', title : '手机号码', width : 100, resizable:false},
            {field : 'state', title : '状态', width : 100, resizable:false},
            {field : 'time', title : '修改时间', width : 100, resizable:false},
            {field : 'remarks', title : '备注', width : 100, resizable:false}
        ]]
    };
datagrid_param(serUser.domId,serUser.url,serUser.toolbar,serUser.cols,serUser.data_opt);

封装js代码

/**
   * @param  datagrid 要创建table的id
   * @param  url 后台地址
   * @param  toolbar 工具栏
   * @param  columns th中的信息和匹配数据库的字段值
   * @param  data_opt 一些公共参数 没有的话默认default_opt
   */
 datagrid_param : function(datagrid,url,toolbar,columns,data_opt){
      var default_opt = {
          'fit':true,
          'fitColumns':true,
          'pagination':true,
          'pageList':[10, 20, 50],
          'pageSize':10,
          'striped': true,
          'singleSelect':true,
          'loadMsg':'正在加载中...',
          'remoteSort':true,
          'sortName':'id'
      };
      for(opt in data_opt){
          default_opt[opt]=data_opt[opt];
      }
      datagrid.datagrid({
          url : url,
          method : 'post',
          idField : 'user',
          toolbar:toolbar,//工具栏
          pagination:default_opt["pagination"],//添加分页条
          pageNumber : 1,
          pageSize:default_opt["pageSize"],//设置分页时设置每页多少条。默认为10。
          pageList:default_opt["pageList"],//设置分页时初始化条数选择大小。默认为[10,20,30,40,50],
          striped: default_opt["striped"],  //奇偶条显示不同的颜色
          fit: default_opt["fit"], //datagrid自适应宽度
          fitColumns: default_opt["fitColumns"], //列自适应宽度
          singleSelect:default_opt["singleSelect"],//只选择一行
          loadMsg : default_opt["loadMsg"],//缓冲信息提示
          remoteSort:default_opt["remoteSort"],//设置服务器对数据进行排序
          sortOrder : 'DESC',//排序方式
          sortName:default_opt["sortName"],//排序的参数向后台返值

          onLoadError: function(){
              alert('数据失败')
          },
          columns:columns,
          onLoadSuccess:function(){
              datagrid.datagrid('clearSelections'); //加载成功后，消除所有选项
          }
      });
  }