网上找了好多人的方法发现都有问题发一个可用方便的
第一部分，datagrid加载
主要分三种情况 加载
1，loaddata 加载
2，datagrid 加载
3, url 加载
第二部分，点击 datagrid里面的跳转
第三部分，弹窗显示
首先MVC控制器初始数据
1 public JsonResult Data() 2 { 3 var product = new[] 4 { 5 new { productid="FI-SW-01",unitcost=10,status="P",listprice=16,attr1="Large",itemid="EST-1"}, 6 new { productid="K9-DL-01",unitcost=12,status="P",listprice=18,attr1="Spotted Adult Female",itemid="EST-10"}, 7 new { productid="RP-SN-01",unitcost=12,status="P",listprice=18,attr1="Venomless",itemid="EST-11"}, 8 new { productid="RP-SN-01",unitcost=12,status="P",listprice=18,attr1="Rattleless",itemid="EST-12"}, 9 new { productid="RP-LI-02",unitcost=12,status="P",listprice=18,attr1="Green Adult",itemid="EST-13"}, 10 new { productid="FL-DSH-01",unitcost=12,status="P",listprice=58,attr1="Tailless",itemid="EST-14"}, 11 new { productid="FL-DSH-01",unitcost=12,status="P",listprice=23,attr1="With tail",itemid="EST-15"}, 12 new { productid="FL-DLH-02",unitcost=12,status="P",listprice=93,attr1="Adult Female",itemid="EST-16"}, 13 new { productid="FL-DLH-02",unitcost=12,status="P",listprice=93,attr1="Adult Male",itemid="EST-17"}, 14 new { productid="AV-CB-01",unitcost=92,status="P",listprice=193,attr1="Adult Male",itemid="EST-18"} 15 }; 16 17 return Json(new { total = product.Count(), rows = product }, JsonRequestBehavior.AllowGet); 18 }
第一部分，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>
1 $("#Cse_Bespeak_Log").datagrid({ 2 url: "@Url.Action("data", "home")", 3 iconCls: "icon-add", 4 fitColumns: false, 5 loadMsg: "数据加载中......", 6 pagination: true, 7 rownumbers: true, 8 nowrap: false, 9 showFooter: true, 10 singleSelect: true, 11 pageList: [100, 50, 20, 10], 12 13 columns: [[ 14 { 15 field: 'itemid', title: '编号', width: 50, align: 'center', 16 formatter: function (value, row, index) { 17 18 return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>" + value + "</a>"; 19 } 20 }, 21 { 22 field: 'productid', title: '用户名', width: 150, align: 'center', 23 }, 24 { 25 field: 'listprice', title: '姓名', width: 150, align: 'center', 26 }, 27 { 28 field: 'unitcost', title: '操作', width: 100, align: 'center', 29 }, 30 { 31 field: 'attr1', title: '操作', width: 100, align: 'center', 32 }, 33 { 34 field: 'status', title: '操作', width: 100, align: 'center', 35 }]] 36 37 })
3.url加载
1 <table id="tt" title="Load Data" class="easyui-datagrid" style="width:700px;height:250px" 2 url="@Url.Action("data","home")" 3 iconCls="icon-save" pagination="true"> 4 <thead> 5 <tr> 6 <th field="itemid" width="80">Item ID</th> 7 <th data-options="field:'productid',width:180,formatter: rowformater" field="productid" width="120">Product ID</th> 8 <th field="listprice" width="80" align="right">List Price</th> 9 <th field="unitcost" width="80" align="right">Unit Cost</th> 10 <th field="attr1" width="250">Attribute</th> 11 <th field="status" width="60" align="center">Stauts</th> 12 </tr> 13 </thead> 14 </table>
1 var pager = $('#tt').datagrid('getPager'); // get the pager of datagrid 2 pager.pagination({ 3 showPageList: false, 4 buttons: [{ 5 iconCls: 'icon-search', 6 handler: function () { 7 alert('search'); 8 } 9 }, { 10 iconCls: 'icon-add', 11 handler: function () { 12 alert('add'); 13 } 14 }, { 15 iconCls: 'icon-edit', 16 handler: function () { 17 alert('edit'); 18 } 19 }], 20 onBeforeRefresh: function () { 21 alert('before refresh'); 22 return true; 23 } 24 }); 25 26 });
第二部分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
1 <div id="dlg" class="easyui-dialog" style="width: 1000px; height: 350px;" 2 data-options="closed:true,buttons:'#dlg-buttons'"> 3 <table id="datagrid" class="easyui-datagrid" style="width:600px;height:350px"> 4 5 </table> 6 </div>
1 function LoadUserInfo() { 2 3 /*获取选中行*/ 4 //var row = $('#Cse_Bespeak_Log').datagrid('getSelected'); //获取选中行 5 6 $("#datagrid").datagrid({ 7 url: "@Url.Action("data1", "home")", 8 iconCls: "icon-add", 9 fitColumns: false, 10 loadMsg: "数据加载中......", 11 pagination: true, 12 rownumbers: true, 13 nowrap: false, 14 showFooter: true, 15 singleSelect: true, 16 pageList: [100, 50, 20, 10], 17 18 columns: [[ 19 { 20 field: 'itemid', title: '编号', width: 50, align: 'center', 21 formatter: function (value, row, index) { 22 23 return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>"+ value +"</a>"; 24 } 25 }, 26 { 27 field: 'productid', title: '用户名', width: 150, align: 'center', 28 }, 29 { 30 field: 'listprice', title: '姓名', width: 150, align: 'center', 31 }, 32 { 33 field: 'unitcost', title: '操作', width: 100, align: 'center', 34 }, 35 { 36 field: 'attr1', title: '操作', width: 100, align: 'center', 37 }, 38 { 39 field: 'status', title: '操作', width: 100, align: 'center', 40 }]] 41 42 }) 43 44 45 $('#dlg').window('open'); //弹出这个dialog框 46 };