jquery easyui datagrid 加载成功，选中某一行

Posted 2023-04-25

jquery easyui datagrid 重新加载成功，选中某一行。代码如下：
$('#dg').datagrid('reload',onLoadSuccess:function(data)
$('#dg').datagrid('selectRow',3);
);
为什么这样无法选中？而且那个loading条一直在那转。。。急急急

你好！！

jquery easyui datagrid中的 reload 不是这样用的~

1.首先你需要设置datagrid的onLoadSuccess
$('#dg').datagrid(onLoadSuccess : function(data)
    $('#dg').datagrid('selectRow',3);
);

2.onLoadSuccess如果是通过 data-options的方式设置的没问题，如果通过js脚本设置的话，
需要保证在loadData之前绑定这个事件函数，类似下面这样
$('#dg').datagrid("onLoadSuccess":function(data)
    $(this).datagrid('selectRow',3);
).datagrid("loadData",XXXXX);
否则在加载数据之后，可能不会去执行onLoadSuccess里面的代码；

3.reload方法重新加载当前页面数据
$('#dg').datagrid("reload");

至于loading一只显示，说明你的数据应该没有加载成功吧··

希望对你有帮助！！

参考技术A

jquery easyui datagrid中的 reload 不是这样用的。

1.你需要设置datagrid的onLoadSuccess$('#dg').datagrid(onLoadSuccess : function(data)    $('#dg').datagrid('selectRow',3);); 2.onLoadSuccess如果是通过 data-options的方式设置的没问题，如果通过js脚本设置的话，需要保证在loadData之前绑定这个事件函数，类似下面这样$('#dg').datagrid("onLoadSuccess":function(data)    $(this).datagrid('selectRow',3);).datagrid("loadData",XXXXX);否则在加载数据之后，可能不会去执行onLoadSuccess里面的代码； 3.reload方法重新加载当前页面数据$('#dg').datagrid("reload");

至于loading一只显示，说明你的数据应该没有加载成功。

扩展资料：

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。 用户可以组合使用这些组件，也可以单独使用其中一个。

jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点：

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel(...)）和html标记方式（如：class="easyui-panel"）

4、支持HTML5（通过data-options属性）

5、开发产品时可节省时间和资源

6、简单，但很强大

7、支持扩展，可根据自己的需求扩展控件

8、目前各项不足正以版本递增的方式不断完善

参考资料：jQueryEasyUI_百度百科

jquery easyui datagrid 动态 加载列

实现方式：

首先根据输入的sql语句获得相关的列名称返回给前台，然后在datagrid中动态加载列，接着根据查询条件（包括sql语句）获取相关的记录返回给前台用于填充datagrid。从而实现类似oracle web版的sql查询。

 

前台主要js为：

Js代码  

1. function sqlSearch(){  
2.     var sqlStatement = $.trim($("#sqlStatementId").val());  
3.     if(sqlStatement == null || sqlStatement == ""){  
4.         return false;  
5.     }  
6.       
7.     var type = "POST";  
8.     var url = "sqlExecCtrl.action?cmd=getColumnNameList";  
9.     var param = "sqlStatement=" + $("#sqlStatementId").val();  
10.           
11.     ajaxExtend(type,url,param,function(data){  
12.         var options = $("#sqlResultDisplay").datagrid("options");                   //取出当前datagrid的配置     
13.         options.columns = eval(data.columns);                                               //添加服务器端返回的columns配置信息     
14.         options.queryParams = getQueryParams("sqlConditionId");             //添加查询参数  
15.         $("#sqlResultDisplay").datagrid(options) ;                                        
16.         $("#sqlResultDisplay").datagrid("load") ;                                           //获取当前页信息  
17.     });  
18. }  
19.   
20. /** 
21.  * 根据指定条件请求系统资源 
22.  *1、 异步 
23.  *2、返回格式为json 
24.  * 
25.  * @param type          //请求方式 
26.  * @param url               //请求url 
27.  * @param param     //请求参数 
28.  * @param callback      //回调函数 
29.  */  
30. function ajaxExtend(type,url,param,callback){  
31.     ajaxExtendBase(type,url,param,true,callback);  
32. }  
33.   
34. /** 
35.  * ajax请求基础方法 
36.  * @param type 
37.  * @param url 
38.  * @param param 
39.  * @param async 
40.  * @param callback 
41.  */  
42. function ajaxExtendBase(type,url,param,async,callback){  
43.     $.ajax({  
44.            type: type,  
45.            url: url,  
46.            data:param,  
47.            async : async,  
48.            dataType:"json",  
49.            success:function(result){  
50.                if(result.success){                                          //只有sql正确能获取相关列名后才再请求列表资源  
51.                     callback(result.data);                                  //获取当前页信息  
52.                }  
53.                else{  
54.                    dealWithException(result.exception);  
55.                }  
56.            }  
57.     });  
58. }  
59.   
60.   
61. /** 
62.  * 将指定form参数转换为json对象 
63.  */  
64. function getQueryParams(conditionFormId){  
65.  var searchCondition = getJqueryObjById(conditionFormId).serialize();  
66.  var obj = {};  
67.     var pairs = searchCondition.split(‘&‘);  
68.     var name,value;  
69.       
70.     $.each(pairs, function(i,pair) {  
71.      pair = pair.split(‘=‘);  
72.      name = decodeURIComponent(pair[0]);  
73.      value = decodeURIComponent(pair[1]);  
74.        
75.      obj[name] =  !obj[name] ? value :[].concat(obj[name]).concat(value);              //若有多个同名称的参数，则拼接  
76.     });  
77.       
78.     return obj;  
79. }  

 

后台返回的json格式如下

Java代码  

1. {"total":3,  
2. "columns":[[{"field":"ROLE_ID","title":"ROLE_ID","width":100,"resizable":true},  
3.     {"field":"NAME","title":"NAME","width":100,"resizable":true},  
4.     {"field":"CREATE_DATE","title":"CREATE_DATE","width":100,"resizable":true},  
5.     {"field":"DESCRIPTION","title":"DESCRIPTION","width":100,"resizable":true}]],  
6. "rows":[{"NAME":"普通人员","DESCRIPTION":"只具有查看权限","CREATE_DATE":"2012-09-21 16:31:53.0","ROLE_ID":"7"},  
7.     {"NAME":"调度人员","DESCRIPTION":"开放全部功能，但无系统管理相关权限","CREATE_DATE":"2012-09-21 16:32:24.0","ROLE_ID":"8"},  
8.     {"NAME":"超级管理员","DESCRIPTION":"具有所有权限","CREATE_DATE":"2012-09-17 20:23:19.0","ROLE_ID":"1"}]}  

 

其中，"columns"对应sqlSearch方法的ajaxExtend(type,url,param,function(data){})回调函数中的data,"total"和"rows"为datagrid加载数据