jQueryEasyUI:如何重新加载组合网格?
jQueryEasyUI: how to reload combogrid?
我有一个 ASP.NET 核心应用程序,我想使用 ajax 调用将数据加载到 easyUI combogrid。
我这样做:
var jsonData = [];
populateGrid();// Here is ajax call, jsonData array is populated
var g23=$('#ipCC').combogrid({
panelWidth: 450,
value: '006',
idField: 'customerID',
textField: 'fullName',
source:jsonData,
columns: [[
{field: 'customerID', title: 'customerID', width: 60 },
{field: 'fullName', title: 'fullName', width: 100 }
]]
});
var g25 = $('#ipCC').combogrid('grid');//<-----------------error
g25.datagrid('loadData', jsonData);
但是当我尝试获取指向 'grid' 的指针时,我收到错误消息:
Uncaught TypeError: Cannot read property 'jQuery3110372840994670562'
of undefined
at U.get (jquery.min.js:3)
at U.access (jquery.min.js:3)
at Function.data (jquery.min.js:3)
at grid (jquery.easyui.min.js:16058)
at r.fn.init.$.fn.combogrid (jquery.easyui.min.js:16033)
at Index:240
怎么了?如何修复它并将数据加载到组合网格?
<input id="cc" name="dept" value="01">
<script type="text/javascript">
var jsonData = {"rows":[
{"customerID":"ID1","fullName":"John XYZ"},
{"customerID":"ID2","fullName":"John ABC"},
{"customerID":"ID3","fullName":"John DEF"},
{"customerID":"ID4","fullName":"John GHJ"},
{"customerID":"ID5","fullName":"John KLM"},
{"customerID":"ID6","fullName":"John PQR"},
{"customerID":"ID7","fullName":"John STU"},
{"customerID":"006","fullName":"John STU 2"}
]};
//populateGrid();// Here is ajax call, jsonData array is populated
var g23 = $('#cc').combogrid({
panelWidth:450,
value:'006',
idField:'customerID',
textField:'fullName',
source: jsonData,
columns: [[
{field: 'customerID', title: 'customerID', width: 60 },
{field: 'fullName', title: 'fullName', width: 100 }
]],
});
var g25 = $('#cc').combogrid('grid'); //<-----------------NO error
g25.datagrid('loadData', jsonData);
</script>
我从 EasyUI 的示例中提取了 hint,您的 JSON 必须有 "rows" 数组。
更新:
重点是如何构建Json对象。我以this link为例。
因此,您需要包含一组客户的 rows 属性。请参阅下面的代码。
WebApi 控制器
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Collections.Generic;
namespace WebApplication5.Controllers
{
[Produces("application/json")]
[Route("api/Example5")]
public class Example5Controller : Controller
{
public class Customer
{
public string customerID { get; set; }
public string fullName { get; set; }
}
public class RootJsonClass
{
public Customer[] rows { get; set; }
}
//https://www.newtonsoft.com/json/help/html/SerializeObject.htm
// POST: api/Example5
[HttpPost]
public JsonResult Post([FromBody]string Query)
{
//SetHeader();
var rs1 = new RootJsonClass();
List<Customer> lstC = new List<Customer>(8);
lstC.Add(new Customer { customerID = "ID1", fullName = "John XYZ" });
lstC.Add(new Customer { customerID = "ID2", fullName = "John ABC" });
lstC.Add(new Customer { customerID = "ID3", fullName = "John DEF" });
lstC.Add(new Customer { customerID = "ID4", fullName = "John GHJ" });
lstC.Add(new Customer { customerID = "ID5", fullName = "John KLM" });
lstC.Add(new Customer { customerID = "ID6", fullName = "John PQR" });
lstC.Add(new Customer { customerID = "ID7", fullName = "John STU" });
lstC.Add(new Customer { customerID = "006", fullName = "John STU 2" });
rs1.rows = lstC.ToArray();
var j1 = JsonConvert.SerializeObject(rs1, Formatting.Indented);
return Json(j1);
}
}
}
网页:
<input id="cc" name="dept" value="01">
<script type="text/javascript">
var jsonData = [];
function populateGrid() {
//var val = $('#cc').combogrid('getValue');
//alert('populateGrid');
var Url = '/api/Example5';
var objval = "param";
$.ajax({
type: "POST",
async: false,
contentType: "application/json; charset=utf-8",
url: Url,
data: "'" + objval + "'", //data: "{'Query':'" + objval + "'}",
dataType: "json",
success: function (data) {
jsonData = data;//.d;
},
error: function (result) {
alert("Error populateGrid:"+result);
}
});
console.log('Array populated');
};
populateGrid ();
var g23 = $('#cc').combogrid({
panelWidth:450,
value:'006',
idField:'customerID',
textField:'fullName',
source: jsonData,
columns: [[
{field: 'customerID', title: 'customerID', width: 60 },
{field: 'fullName', title: 'fullName', width: 100 }
]],
});
var g25 = $('#cc').combogrid('grid'); //<-----------------NO error
console.log(jsonData);
jsonData = JSON.parse(jsonData);
g25.datagrid('loadData', jsonData);
</script>
更新 2:
Javascript(g25变量已经设置,无需再次设置):
<input id="cc" name="dept" value="01">
<button name="btnRefresh" onclick="JavaScript:fncRefresh();" >Refresh</button>
<script type="text/javascript">
function fncRefresh() {
populateGrid();
jsonData = JSON.parse(jsonData);
g25.datagrid('loadData', jsonData);
}
控制器(它给出列表中的 4 或 8 项测试):
private static bool bFirstCallFlag = true;
//https://www.newtonsoft.com/json/help/html/SerializeObject.htm
// POST: api/Example5
[HttpPost]
public JsonResult Post([FromBody]string Query)
{
//SetHeader();
var rs1 = new RootJsonClass();
List<Customer> lstC = new List<Customer>(8);
lstC.Add(new Customer { customerID = "ID1", fullName = "John XYZ" });
lstC.Add(new Customer { customerID = "ID2", fullName = "John ABC" });
lstC.Add(new Customer { customerID = "ID3", fullName = "John DEF" });
lstC.Add(new Customer { customerID = "ID4", fullName = "John GHJ" });
if (bFirstCallFlag)
{
lstC.Add(new Customer { customerID = "ID5", fullName = "John KLM" });
lstC.Add(new Customer { customerID = "ID6", fullName = "John PQR" });
lstC.Add(new Customer { customerID = "ID7", fullName = "John STU" });
lstC.Add(new Customer { customerID = "006", fullName = "John STU 2" });
bFirstCallFlag = false;
}
else
{
bFirstCallFlag = true;
}
rs1.rows = lstC.ToArray();
var j1 = JsonConvert.SerializeObject(rs1, Formatting.Indented);
return Json(j1);
}
我有一个 ASP.NET 核心应用程序,我想使用 ajax 调用将数据加载到 easyUI combogrid。 我这样做:
var jsonData = [];
populateGrid();// Here is ajax call, jsonData array is populated
var g23=$('#ipCC').combogrid({
panelWidth: 450,
value: '006',
idField: 'customerID',
textField: 'fullName',
source:jsonData,
columns: [[
{field: 'customerID', title: 'customerID', width: 60 },
{field: 'fullName', title: 'fullName', width: 100 }
]]
});
var g25 = $('#ipCC').combogrid('grid');//<-----------------error
g25.datagrid('loadData', jsonData);
但是当我尝试获取指向 'grid' 的指针时,我收到错误消息:
Uncaught TypeError: Cannot read property 'jQuery3110372840994670562' of undefined at U.get (jquery.min.js:3) at U.access (jquery.min.js:3) at Function.data (jquery.min.js:3) at grid (jquery.easyui.min.js:16058) at r.fn.init.$.fn.combogrid (jquery.easyui.min.js:16033) at Index:240
怎么了?如何修复它并将数据加载到组合网格?
<input id="cc" name="dept" value="01">
<script type="text/javascript">
var jsonData = {"rows":[
{"customerID":"ID1","fullName":"John XYZ"},
{"customerID":"ID2","fullName":"John ABC"},
{"customerID":"ID3","fullName":"John DEF"},
{"customerID":"ID4","fullName":"John GHJ"},
{"customerID":"ID5","fullName":"John KLM"},
{"customerID":"ID6","fullName":"John PQR"},
{"customerID":"ID7","fullName":"John STU"},
{"customerID":"006","fullName":"John STU 2"}
]};
//populateGrid();// Here is ajax call, jsonData array is populated
var g23 = $('#cc').combogrid({
panelWidth:450,
value:'006',
idField:'customerID',
textField:'fullName',
source: jsonData,
columns: [[
{field: 'customerID', title: 'customerID', width: 60 },
{field: 'fullName', title: 'fullName', width: 100 }
]],
});
var g25 = $('#cc').combogrid('grid'); //<-----------------NO error
g25.datagrid('loadData', jsonData);
</script>
我从 EasyUI 的示例中提取了 hint,您的 JSON 必须有 "rows" 数组。
更新:
重点是如何构建Json对象。我以this link为例。 因此,您需要包含一组客户的 rows 属性。请参阅下面的代码。
WebApi 控制器
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Collections.Generic;
namespace WebApplication5.Controllers
{
[Produces("application/json")]
[Route("api/Example5")]
public class Example5Controller : Controller
{
public class Customer
{
public string customerID { get; set; }
public string fullName { get; set; }
}
public class RootJsonClass
{
public Customer[] rows { get; set; }
}
//https://www.newtonsoft.com/json/help/html/SerializeObject.htm
// POST: api/Example5
[HttpPost]
public JsonResult Post([FromBody]string Query)
{
//SetHeader();
var rs1 = new RootJsonClass();
List<Customer> lstC = new List<Customer>(8);
lstC.Add(new Customer { customerID = "ID1", fullName = "John XYZ" });
lstC.Add(new Customer { customerID = "ID2", fullName = "John ABC" });
lstC.Add(new Customer { customerID = "ID3", fullName = "John DEF" });
lstC.Add(new Customer { customerID = "ID4", fullName = "John GHJ" });
lstC.Add(new Customer { customerID = "ID5", fullName = "John KLM" });
lstC.Add(new Customer { customerID = "ID6", fullName = "John PQR" });
lstC.Add(new Customer { customerID = "ID7", fullName = "John STU" });
lstC.Add(new Customer { customerID = "006", fullName = "John STU 2" });
rs1.rows = lstC.ToArray();
var j1 = JsonConvert.SerializeObject(rs1, Formatting.Indented);
return Json(j1);
}
}
}
网页:
<input id="cc" name="dept" value="01">
<script type="text/javascript">
var jsonData = [];
function populateGrid() {
//var val = $('#cc').combogrid('getValue');
//alert('populateGrid');
var Url = '/api/Example5';
var objval = "param";
$.ajax({
type: "POST",
async: false,
contentType: "application/json; charset=utf-8",
url: Url,
data: "'" + objval + "'", //data: "{'Query':'" + objval + "'}",
dataType: "json",
success: function (data) {
jsonData = data;//.d;
},
error: function (result) {
alert("Error populateGrid:"+result);
}
});
console.log('Array populated');
};
populateGrid ();
var g23 = $('#cc').combogrid({
panelWidth:450,
value:'006',
idField:'customerID',
textField:'fullName',
source: jsonData,
columns: [[
{field: 'customerID', title: 'customerID', width: 60 },
{field: 'fullName', title: 'fullName', width: 100 }
]],
});
var g25 = $('#cc').combogrid('grid'); //<-----------------NO error
console.log(jsonData);
jsonData = JSON.parse(jsonData);
g25.datagrid('loadData', jsonData);
</script>
更新 2:
Javascript(g25变量已经设置,无需再次设置):
<input id="cc" name="dept" value="01">
<button name="btnRefresh" onclick="JavaScript:fncRefresh();" >Refresh</button>
<script type="text/javascript">
function fncRefresh() {
populateGrid();
jsonData = JSON.parse(jsonData);
g25.datagrid('loadData', jsonData);
}
控制器(它给出列表中的 4 或 8 项测试):
private static bool bFirstCallFlag = true;
//https://www.newtonsoft.com/json/help/html/SerializeObject.htm
// POST: api/Example5
[HttpPost]
public JsonResult Post([FromBody]string Query)
{
//SetHeader();
var rs1 = new RootJsonClass();
List<Customer> lstC = new List<Customer>(8);
lstC.Add(new Customer { customerID = "ID1", fullName = "John XYZ" });
lstC.Add(new Customer { customerID = "ID2", fullName = "John ABC" });
lstC.Add(new Customer { customerID = "ID3", fullName = "John DEF" });
lstC.Add(new Customer { customerID = "ID4", fullName = "John GHJ" });
if (bFirstCallFlag)
{
lstC.Add(new Customer { customerID = "ID5", fullName = "John KLM" });
lstC.Add(new Customer { customerID = "ID6", fullName = "John PQR" });
lstC.Add(new Customer { customerID = "ID7", fullName = "John STU" });
lstC.Add(new Customer { customerID = "006", fullName = "John STU 2" });
bFirstCallFlag = false;
}
else
{
bFirstCallFlag = true;
}
rs1.rows = lstC.ToArray();
var j1 = JsonConvert.SerializeObject(rs1, Formatting.Indented);
return Json(j1);
}