使用EasyUI如何绑定Json数据源-js教程-PHP中文网

首页

web前端

js教程

使用EasyUI如何绑定Json数据源

亚连

Jun 20, 2018 pm 03:22 PM

本篇文章主要介绍了EasyUI的DataGrid绑定Json数据源的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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(&#39;datagrid&#39;); 
    var opts = dg.datagrid(&#39;options&#39;); 
    if (!state.allRows) { 
      state.allRows = (data.rows); 
    } 
    if (!opts.remoteSort && opts.sortName) { 
      var names = opts.sortName.split(&#39;,&#39;); 
      var orders = opts.sortOrder.split(&#39;,&#39;); 
      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(&#39;getColumnOption&#39;, sn); 
          var sortFunc = col.sorter || function (a, b) { 
            return a == b ? 0 : (a > b ? 1 : -1); 
          }; 
          r = sortFunc(r1[sn], r2[sn]) * (so == &#39;asc&#39; ? 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(&#39;datagrid&#39;); 
        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(&#39;getPager&#39;); 
        pager.pagination({ 
          onSelectPage: function (pageNum, pageSize) { 
            opts.pageNumber = pageNum; 
            opts.pageSize = pageSize; 
            pager.pagination(&#39;refresh&#39;, { 
              pageNumber: pageNum, 
              pageSize: pageSize 
            }); 
            dg.datagrid(&#39;loadData&#39;, state.allRows); 
          } 
        }); 
        $(this).datagrid(&#39;loadData&#39;, state.data); 
        if (opts.url) { 
          $(this).datagrid(&#39;reload&#39;); 
        } 
      }); 
    }, 
    loadData: function (jq, data) { 
      jq.each(function () { 
        $(this).data(&#39;datagrid&#39;).allRows = null; 
      }); 
      return loadDataMethod.call($.fn.datagrid.methods, jq, data); 
    }, 
    deleteRow: function (jq, index) { 
      return jq.each(function () { 
        var row = $(this).datagrid(&#39;getRows&#39;)[index]; 
        deleteRowMethod.call($.fn.datagrid.methods, $(this), index); 
        var state = $(this).data(&#39;datagrid&#39;); 
        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(&#39;loadData&#39;, state.allRows); 
        } 
      }); 
    }, 
    getAllRows: function (jq) { 
      return jq.data(&#39;datagrid&#39;).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 
        }); 
      } 
      $(&#39;#dg&#39;).datagrid({ data: rows }).datagrid(&#39;clientPaging&#39;); 
    }, 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:&#39;colum1&#39;,align:&#39;center&#39;">列名1</th> 
            <th data-options="field:&#39;colum2&#39;,align:&#39;center&#39;">列名2</th> 
            <th data-options="field:&#39;colum3&#39;,align:&#39;center&#39;">列名3</th> 
            <th data-options="field:&#39;colum4&#39;,align:&#39;center&#39;">列名4</th> 
            <th data-options="field:&#39;colum5&#39;,align:&#39;center&#39;">列名5</th> 
            <th data-options="field:&#39;colum6&#39;,align:&#39;center&#39;">列名6</th> 
          </tr> 
        </thead> 
      </table>

登录后复制

JS代码：

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

登录后复制

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

上面是我整理给大家的，希望今后会对大家有帮助。

在React中详细介绍受控组件与非受控组件

使用Angular如何实现基本购物车功能

在node.js中有关路由，中间件的详细介绍说明

在Vue中如何实现进入/离开动画

在webpack中详细解读入口函数run

以上是使用EasyUI如何绑定Json数据源的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7569

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

108

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？ Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

console.log输出结果差异：两次调用为何不同？ Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...

如何实现视差滚动和元素动画效果，像资生堂官网那样？或者：怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？ Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...

初学者的打字稿，第2部分：基本数据类型 Mar 19, 2025 am 09:10 AM

掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型与JavaScript一样，TypeScript中的null

PowerPoint可以运行JavaScript吗？ Apr 01, 2025 pm 05:17 PM

在PowerPoint中可以运行JavaScript，通过VBA调用外部JavaScript文件或嵌入HTML文件来实现。1.使用VBA调用JavaScript文件，需启用宏并具备VBA编程知识。2.嵌入包含JavaScript的HTML文件，简单易行但受安全限制。优点包括扩展功能和灵活性，劣势涉及安全性、兼容性和复杂性，实际应用需注意安全性、兼容性、性能和用户体验。

See all articles

使用EasyUI如何绑定Json数据源

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题