EasyUI的DataGrid绑定Json数据源的示例代码


Posted in Javascript onDecember 16, 2017

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。

第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格

前台代码:

<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" title="需要设置表格标题" data-options=" 
        rownumbers:true, 
        singleSelect:true, 
        @*autoRowHeight:false,*@ 
        pagination:true 
        @*pageSize:10*@"> 
      <thead> 
        <tr> 
          <th field="colum1">列1</th> 
          <th field="colum2">列2</th> 
          <th field="colum3">列3</th> 
          <th field="colum4">列4</th> 
          <th field="colum5">列5</th> 
          <th field="colum6">列6</th> 
        </tr> 
      </thead> 
    </table>

JS代码:

(function ($) { 
  function pagerFilter(data) { 
    if ($.isArray(data)) { // is array 
      data = { 
        total: data.length, 
        rows: data 
      } 
    } 
    var target = this; 
    var dg = $(target); 
    var state = dg.data('datagrid'); 
    var opts = dg.datagrid('options'); 
    if (!state.allRows) { 
      state.allRows = (data.rows); 
    } 
    if (!opts.remoteSort && opts.sortName) { 
      var names = opts.sortName.split(','); 
      var orders = opts.sortOrder.split(','); 
      state.allRows.sort(function (r1, r2) { 
        var r = 0; 
        for (var i = 0; i < names.length; i++) { 
          var sn = names[i]; 
          var so = orders[i]; 
          var col = $(target).datagrid('getColumnOption', sn); 
          var sortFunc = col.sorter || function (a, b) { 
            return a == b ? 0 : (a > b ? 1 : -1); 
          }; 
          r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1); 
          if (r != 0) { 
            return r; 
          } 
        } 
        return r; 
      }); 
    } 
    var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); 
    var end = start + parseInt(opts.pageSize); 
    data.rows = state.allRows.slice(start, end); 
    return data; 
  } 
 
  var loadDataMethod = $.fn.datagrid.methods.loadData; 
  var deleteRowMethod = $.fn.datagrid.methods.deleteRow; 
  $.extend($.fn.datagrid.methods, { 
    clientPaging: function (jq) { 
      return jq.each(function () { 
        var dg = $(this); 
        var state = dg.data('datagrid'); 
        var opts = state.options; 
        opts.loadFilter = pagerFilter; 
        var onBeforeLoad = opts.onBeforeLoad; 
        opts.onBeforeLoad = function (param) { 
          state.allRows = null; 
          return onBeforeLoad.call(this, param); 
        } 
        var pager = dg.datagrid('getPager'); 
        pager.pagination({ 
          onSelectPage: function (pageNum, pageSize) { 
            opts.pageNumber = pageNum; 
            opts.pageSize = pageSize; 
            pager.pagination('refresh', { 
              pageNumber: pageNum, 
              pageSize: pageSize 
            }); 
            dg.datagrid('loadData', state.allRows); 
          } 
        }); 
        $(this).datagrid('loadData', state.data); 
        if (opts.url) { 
          $(this).datagrid('reload'); 
        } 
      }); 
    }, 
    loadData: function (jq, data) { 
      jq.each(function () { 
        $(this).data('datagrid').allRows = null; 
      }); 
      return loadDataMethod.call($.fn.datagrid.methods, jq, data); 
    }, 
    deleteRow: function (jq, index) { 
      return jq.each(function () { 
        var row = $(this).datagrid('getRows')[index]; 
        deleteRowMethod.call($.fn.datagrid.methods, $(this), index); 
        var state = $(this).data('datagrid'); 
        if (state.options.loadFilter == pagerFilter) { 
          for (var i = 0; i < state.allRows.length; i++) { 
            if (state.allRows[i] == row) { 
              state.allRows.splice(i, 1); 
              break; 
            } 
          } 
          $(this).datagrid('loadData', state.allRows); 
        } 
      }); 
    }, 
    getAllRows: function (jq) { 
      return jq.data('datagrid').allRows; 
    } 
  }) 
})(jQuery);
$.ajax({ 
    type: "get",  //AJAX提交方式 
    url: "路径", 
    datatype: "json", 
    data: "userid=" + "id"+ "&username=" + "name",  //向后台传递参数,无需传递参数就可以删除 
    success: function (data) { 
      var rows = []; 
       
      for (var i = 0; i < data.length; i++) {   //data是返回值的集合 
        rows.push({               //把data数据对应的值压到rows对应数组中 
          colum1: data[i].userid, 
          colum2: data[i].leve, 
          colum3: data[i].Username, 
          colum4: data[i].Tel, 
          colum5: data[i].Mail, 
          colum6: data[i].Explain 
        }); 
      } 
      $('#dg').datagrid({ data: rows }).datagrid('clientPaging'); 
    }, error: function () {            //执行出错时执行的方法 
      $.messager.alert("操作提示", "表格失败,请联系管理员!", "warning"); 
    } 
  });

需要绑定表格时调用AJAX方法,AJAX执行完后会自动调用显示数据方法,表格数据就显示出来了

第二种:直接在前台和JS设置好列名,自动绑定

前台代码:
 

<table id="dg" class="easyui-datagrid" title="需要显示表格标题 " data-options="         
        rownumbers:true, 
        singleSelect:true, 
        autoRowHeight:false, 
        pagination:true, 
        "> 
        <thead> 
          <tr> 
            <th data-options="field:'colum1',align:'center'">列名1</th> 
            <th data-options="field:'colum2',align:'center'">列名2</th> 
            <th data-options="field:'colum3',align:'center'">列名3</th> 
            <th data-options="field:'colum4',align:'center'">列名4</th> 
            <th data-options="field:'colum5',align:'center'">列名5</th> 
            <th data-options="field:'colum6',align:'center'">列名6</th> 
          </tr> 
        </thead> 
      </table>

JS代码:

$('#dg').datagrid({ 
    url: '路径?Name=' + Name + "&combox=" + combox,  //设置访问后台路径和传递参数,如果没有参数可以删除 
    dataType: 'json', 
    width: "100%", //宽度 
    striped: true, //把行条纹化(奇偶行背景色不同) 
    idField: 'quesID', //标识字段 
    loadMsg: '正在加载用户的信息.......', //从远程站点加载数据是,显示的提示消息 
    pagination: true, //数据网格底部显示分页工具栏 
    singleSelect: false, //只允许选中一行 
    pageList: [10, 20, 30, 40, 50], //设置每页记录条数的列表 
    pageSize: 10, //初始化页面尺寸(默认分页大小) 
    pageNumber: 1, //初始化页面(默认显示第一页) 
    beforePageText: '第', //页数文本框前显示的汉字  
    afterPageText: '页 共 {pages} 页', 
    displayMsg: '第{from}到{to}条,共{total}条', 
    columns: [[ //每页具体内容 
          { field: 'colum1', title: '标题1', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum2', title: '标题2', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum3', title: '标题3', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum4', title: '标题4', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum5', title: '标题5', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum6', title: ' 标题6 ', width: "13%", align: 'center', editor: 'text' }, 
    ]], 
 
    onLoadSuccess: function (data) { 
 
      //表格加载成功后执行的代码,如果不需要可以删除 
    } 
  })

把JS代码放在一个function函数中就可以了,函数执行时表格就可以绑定数据了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
javascript常用方法汇总
Dec 02 Javascript
原生javascript获取元素样式
Dec 31 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
使用Electron构建React+Webpack桌面应用的方法
Dec 15 #Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 #Javascript
微信小程序左右滑动的实现代码
Dec 15 #Javascript
浅析JavaScript中的特殊数据类型
Dec 15 #Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 #Javascript
微信小程序使用request网络请求操作实例
Dec 15 #Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
浅谈js中的bind
2019/03/18 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python的keyword模块用法实例分析
2015/06/30 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python数组循环处理方法
2019/08/26 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
商场消防管理制度
2014/01/12 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
五四青年节的活动方案
2014/08/20 职场文书
2015年林业工作总结
2015/05/14 职场文书
员工离职证明范本
2015/06/12 职场文书
新闻通讯稿范文
2015/07/22 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers