jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案

时间:2023-03-09 15:10:48
jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案

起因:数据库中一些字段存的是代表具体值的数字,需要渲染为具体值

monggodb中的字典

jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案

mysql中存放的值为:expertin代表教练擅长的搏击技能

jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案

jquery easyui中的相关代码如下:用于加载字典中的数据,注意:这一ajax请求必须设置为同步(async:false),否则,异步操作带来的问题是,还未取到值,就返回了结果,返回值一律是undefined 切记切记切记!!!

而且需要特别注意的是最终的结果变量ret不能在回调函数中返回!!!,因为下面的功能是调用函数loaddict(tblname,myid),如果在回调函数中返回,那么整个函数中返回的仍旧是undefined!!!

  function loaddict(tblname,myid)
{
var ret;
$.ajax({
url:'http://www.cpcandcj.com/returntxt/'+tblname+"/"+myid,
method:'get',
async:false,
success:function (data) {
console.log(data);
ret = data;
}
});
if(ret)
{
return ret;
}
}

代码---把多个键组成的字符串拆为数组并循环遍历,分别返回对应的文本值

function returntext(tblname,mystr)
{
var retstr = "";
var myobj = mystr.split(',');
console.log(myobj);
var startfrom =;
//retstr+=loaddict(tblname,0,startfrom,retstr,myobj.length);
$.each(myobj,function(k,v){
retstr+=loaddict(tblname,myobj[k])+",";
});
retstr = retstr.substring(,retstr.lastIndexOf(","));
console.log(retstr);
return retstr;
}

加载jquery easy ui datagrid数据源

function duwa()
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==)
{
//console.log(xhr.responseText);
return xhr.responseText;
}
};
xhr.open('get','querycpc');
xhr.send(null);
}
var mystr="";

jquery easy ui中调用

$('#dg').datagrid({
width:,
scrollbarSize:,
fitColumns:true,
url:'http://www.cpcandcj.com/querycpc',
columns:[[
{field:'id',title:'主键',width:''},
{field:'name',title:'教练姓名',width:''},
{field:'age',title:'年龄',width:''},
{field:'birthday',title:'出生日期',width:''},
{field:'expertin',title:'专业擅长',width:''},
]],
loadMsg:'数据加载,请稍等.....',
data:duwa(),
loadFilter:function (data) {
for(var i=;i<data.length;i++)
{
data[i]['expertin'] =returntext('coach_expert',data[i]['expertin'])
}
return data;
}
});

后来执行结果

jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案

不过这一设计带来的问题是,同步无刷新请求带来的是阻塞,和请求页面时的等待。可能带来的体验更糟糕,倒不如直接把文本值存入数据库,在做整体设计时还需见仁见智