网上找了好多人的方法发现都有问题发一个可用方便的
主要分三种情况 加载
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