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

monggodb中的字典

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

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 远程加载数据----把主键渲染为值遇到的问题及解决方案的更多相关文章

  1. jquery easyui datagrid 远程加载数据----javascript法

    jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...

  2. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  3. easyui datagrid 动态加载数据 渲染问题,表格错位问题

    $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...

  4. jquery easyui datagrid 动态 加载列

    实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...

  5. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  6. (转帖)关于easyui中的datagrid在加载数据时候报错:无法获取属性"Length"的值,对象为null或未定义

    结贴说明: 很感谢sp1234等人的热心帮忙和提醒,现在我主要说明下问题所在: 首先我在独立的js文件中,直接把测试数据loaddata进去datagrid是没有问题的.var kk = {" ...

  7. EasyUI datagrid 动态加载表头和数据

    首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...

  8. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  9. DataGrid缓冲加载数据

    当datagrid的滚动条拉到4/3的时候去加载数据.. public MainWindow() { InitializeComponent(); ; i <= ; i++) { Class1 ...

随机推荐

  1. MySQL 树形结构 根据指定节点 获取其所有叶子节点

    背景说明 需求:MySQL树形结构, 根据指定的节点,获取其下属的所有叶子节点. 叶子节点:如果一个节点下不再有子节点,则为叶子节点. 问题分析 1.可以使用类似Java这种面向对象的语言,对节点集合 ...

  2. 什么是lambda?有什么好处

    lambda 函数是一个可以接收任意多个参数(包括可选参数)并且返回单个表达式值的函数 1.lambda 函数比较轻便,即用即仍,很适合需要完成一项功能,但是此功能只在此一处使用,连名字都很随意的情况 ...

  3. jenkins提示反向代理设置有误

    jenkins提示反向代理设置有误 参照地址 https://www.cnblogs.com/yhleng/p/7594892.html 分析:是junkins的url地址填错了 解决: 系统管理-- ...

  4. #Java学习之路——基础阶段二(第十二篇)

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  5. linux stat 命令 显示文件和文件系统状态(查看文件属性) 查看文件inode

    stat 显示文件和文件系统状态(查看文件属性)  查看文件inode详细信息 [root@MongoDB ~]# stat /etc/hosts File: ‘/etc/hosts’ Size: B ...

  6. 常用DOS命令及编程软件fa

    1.常用的dos命令(应用) 在接触集成开发环境之前,我们需要使用命令行窗口对Java程序进行编译和运行,所以需要知道dos命令. 打开命令行窗口的方式:win + r打开运行窗口对java程序进行编 ...

  7. tableau备份

    备份:数据库备份:https://help.tableau.com/current/server-linux/zh-cn/cli_maintenance_tsm.htm#tsm https://hel ...

  8. springboot - 应用实践(N)使用springboot内置的@Scheduled

    1.springboot开箱即用,内置调度任务的使用. 建一个简单的springboot工程,pom.xml: <?xml version="1.0" encoding=&q ...

  9. 洛谷 P2467 地精部落 题解

    题面 好难啊好难啊好难啊~(以后再玩魔兽的时候绝对绝对虐死他) 做完后总结了一下思路; 首先推一下以下三条性质: 1.若两个 i 与 i+1 不相邻,那么我们直接交换这两个数字就可以组成一个新的数列 ...

  10. Git_初步了解

    Git入门篇 一:Git是什么?Git是目前世界上最先进的分布式版本控制系统.工作原理 / 流程: Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库 ...