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('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 함수 에 넣 으 면 됩 니 다.함수 가 실 행 될 때 표 는 데 이 터 를 연결 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.