jquery - jQueryEasyUI:如何重新加载组合网格?
问题描述
我有一个 ASP.NET Core 应用程序,我想使用 ajax 调用将数据加载到 easyUI 组合网格。我这样做:
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);
但是,当我尝试将 ptr 设置为“网格”时,我收到错误消息:
未捕获的类型错误:无法在 Function.data (jquery.min.js:3) 的 U.access (jquery.min.js:3) 的 U.get (jquery.min.js:3) 处读取未定义的属性“jQuery3110372840994670562”在网格 (jquery.easyui.min.js:16058) 在 r.fn.init.$.fn.combogrid (jquery.easyui.min.js:16033) 在索引: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 的例子中得到了提示,你的 JSON 必须有“rows”数组。
更新:
重点是如何构建 Json 对象。我以这个链接为例。因此,您需要包含一组客户的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);
}
推荐阅读
- ios - UITableView Cell 只需轻点几下即可呈现视图控制器
- terraform - 为节点池指定“点状”k8s 标签?
- python - 我如何将我的简单 python 代码循环回顶部 - 也在这里填充空间,因为它不会占用我的标题
- ionic-framework - 为什么 ionic 4 中的主应用程序 scss 文件不起作用?
- checkbox - 如果我们使用浏览器后退按钮转到某个页面并返回当前页面,Microsoft Edge 复选框值不会持续存在?
- oracle - 在 Toad 中查看 pl/sql 存储过程的结果?
- javascript - 单击元素时我需要更改颜色,同时将元素值保存在数组中
- javascript - 无法保存从 Google-Play-Scraper 返回的应用信息?
- java - resultCode 在 buttonpress 和 finish() 之后的值为 -1,但在按下 backbutton 之后为 0,即使在相应的函数中使用相同的代码
- java - 扫描仪输入/输出格式错误