EasyUI datagrid 数据加载

网上找了好多人的方法发现都有问题发一个可用方便的

主要分三种情况 加载
1，loaddata 加载
2，datagrid 加载
3, url 加载

第一部分，datagrid加载

第二部分，点击 datagrid里面的跳转

第三部分，弹窗显示

首先MVC控制器初始数据

    public JsonResult Data()
         {
             var product = new[]
           {
                 new { productid="FI-SW-01",unitcost=,status="P",listprice=,attr1="Large",itemid="EST-1"},
                 new { productid="K9-DL-01",unitcost=,status="P",listprice=,attr1="Spotted Adult Female",itemid="EST-10"},
                 new { productid="RP-SN-01",unitcost=,status="P",listprice=,attr1="Venomless",itemid="EST-11"},
                 new { productid="RP-SN-01",unitcost=,status="P",listprice=,attr1="Rattleless",itemid="EST-12"},
                 new { productid="RP-LI-02",unitcost=,status="P",listprice=,attr1="Green Adult",itemid="EST-13"},
                 new { productid="FL-DSH-01",unitcost=,status="P",listprice=,attr1="Tailless",itemid="EST-14"},
                 new { productid="FL-DSH-01",unitcost=,status="P",listprice=,attr1="With tail",itemid="EST-15"},
                 new { productid="FL-DLH-02",unitcost=,status="P",listprice=,attr1="Adult Female",itemid="EST-16"},
                 new { productid="FL-DLH-02",unitcost=,status="P",listprice=,attr1="Adult Male",itemid="EST-17"},
                 new { productid="AV-CB-01",unitcost=,status="P",listprice=,attr1="Adult Male",itemid="EST-18"}
           };

             return Json(new { total = product.Count(), rows = product }, JsonRequestBehavior.AllowGet);
         }

第一部分，1 loaddata 需要先预加载表格格式，在填充数据

  <table id="tt" title="Load Data" class="easyui-datagrid" style="width:700px;height:250px"
           iconCls="icon-save" pagination="true">
        <thead>
            <tr>
                <th field="itemid" width="80">Item ID</th>
                <th field="productid" width="120">Product ID</th>
                <th field="listprice" width="80" align="right">List Price</th>
                <th field="unitcost" width="80" align="right">Unit Cost</th>
                <th field="attr1" width="250">Attribute</th>
                <th field="status" width="60" align="center">Stauts</th>
            </tr>
        </thead>
    </table>

    function dd()
    {
        $.ajax(
      {
          type: 'post',
          url: '@Url.Action("data","home")',
          data: {
              url: 'hello',
          },
          dataType: 'json',
          success: function (data, stutas, xhr) {
              $('#tt').datagrid("loadData", data)
          },
          error: function (xhr, textStatus, data) {
              alert(data);
          }
      });
    };

2 datagrid 加载

 <table id="Cse_Bespeak_Log" class="easyui-datagrid" style="width: auto; height: 350px;"></table>

 $("#Cse_Bespeak_Log").datagrid({
         url: "@Url.Action("data", "home")",
         iconCls: "icon-add",
         fitColumns: false,
         loadMsg: "数据加载中......",
         pagination: true,
         rownumbers: true,
         nowrap: false,
         showFooter: true,
         singleSelect: true,
         pageList: [100, 50, 20, 10],

         columns: [[
             {
                 field: 'itemid', title: '编号', width: 50, align: 'center',
                 formatter: function (value, row, index) {

                     return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>" + value + "</a>";
                 }
             },
             {
                 field: 'productid', title: '用户名', width: 150, align: 'center',
             },
             {
                 field: 'listprice', title: '姓名', width: 150, align: 'center',
             },
             {
                 field: 'unitcost', title: '操作', width: 100, align: 'center',
             },
             {
                 field: 'attr1', title: '操作', width: 100, align: 'center',
             },
             {
                 field: 'status', title: '操作', width: 100, align: 'center',
             }]]

     })

3.url加载

 <table id="tt" title="Load Data" class="easyui-datagrid" style="width:700px;height:250px"
            url="@Url.Action("data","home")"
            iconCls="icon-save" pagination="true">
         <thead>
             <tr>
                 <th field="itemid" width="80">Item ID</th>
                 <th  data-options="field:'productid',width:180,formatter:  rowformater" field="productid" width="120">Product ID</th>
                 <th field="listprice" width="80" align="right">List Price</th>
                 <th field="unitcost" width="80" align="right">Unit Cost</th>
                 <th field="attr1" width="250">Attribute</th>
                 <th field="status" width="60" align="center">Stauts</th>
             </tr>
         </thead>
     </table>

     var pager = $('#tt').datagrid('getPager');    // get the pager of datagrid
             pager.pagination({
                 showPageList: false,
                 buttons: [{
                     iconCls: 'icon-search',
                     handler: function () {
                         alert('search');
                     }
                 }, {
                     iconCls: 'icon-add',
                     handler: function () {
                         alert('add');
                     }
                 }, {
                     iconCls: 'icon-edit',
                     handler: function () {
                         alert('edit');
                     }
                 }],
                 onBeforeRefresh: function () {
                     alert('before refresh');
                     return true;
                 }
             });

         });

第二部分datagird里面加跳转

1.

   <th  data-options="field:'productid',width:180,formatter:  rowformater" field="productid" width="120">Product ID</th>

   function rowformater(value, row, index) {
        return "<a href='" + row.id + "' target='_blank'>操作</a>";
    };

2已经在上第一部分2中

第三部分，弹窗显示 预制一个table 加载数据在open

 <div id="dlg" class="easyui-dialog" style="width: 1000px; height: 350px;"
          data-options="closed:true,buttons:'#dlg-buttons'">
         <table id="datagrid" class="easyui-datagrid" style="width:600px;height:350px">

         </table>
     </div>

  function LoadUserInfo() {

         /*获取选中行*/
         //var row = $('#Cse_Bespeak_Log').datagrid('getSelected'); //获取选中行

         $("#datagrid").datagrid({
            url: "@Url.Action("data1", "home")",
         iconCls: "icon-add",
         fitColumns: false,
         loadMsg: "数据加载中......",
         pagination: true,
         rownumbers: true,
         nowrap: false,
         showFooter: true,
         singleSelect: true,
         pageList: [100, 50, 20, 10],

         columns: [[
             {
                 field: 'itemid', title: '编号', width: 50, align: 'center',
                 formatter: function (value, row, index) {

                     return  " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>"+ value +"</a>";
                 }
             },
             {
                 field: 'productid', title: '用户名', width: 150, align: 'center',
             },
             {
                 field: 'listprice', title: '姓名', width: 150, align: 'center',
             },
             {
                 field: 'unitcost', title: '操作', width: 100, align: 'center',
             },
             {
                 field: 'attr1', title: '操作', width: 100, align: 'center',
             },
             {
                 field: 'status', title: '操作', width: 100, align: 'center',
             }]]

         })

         $('#dlg').window('open');  //弹出这个dialog框
     };

https://www.cnblogs.com/baiyangyuanzi/p/6702742.html?utm_source=itdadao&utm_medium=referral