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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
iview table高度动态设置方法
Mar 14 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
vue移动端模态框(可传参)的实现
Nov 20 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
使用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
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
python 将md5转为16字节的方法
2018/05/29 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python进度条显示之tqmd模块
2020/08/22 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
运动会入场口号
2014/06/07 职场文书
工地质量标语
2014/06/12 职场文书
洗手间标语
2014/06/23 职场文书
党的生日演讲稿
2014/09/10 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
军训新闻稿范文
2015/07/17 职场文书
行为规范主题班会
2015/08/13 职场文书
详解Python flask的前后端交互
2022/03/31 Python