jQuery easyui datagrid 的数据加载

时间:2022-07-17 16:20:01
 
 

       其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据;另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非url调用)。在项目中我用到的以及研究别人代码中用到的普遍是第一种,下面就分别对他们进行总结。

     一、ajax加载目标url返回的json数据

      首先明确,通过ajax加载目标url返回的值不一定是json格式,在http://blog.csdn.net/luckystar689/article/details/51107388 这篇文章中,楼主向我们介绍了MVC中传值返回到View的集中数据格式,对于这篇博客的思考,对于下拉框、表格、text框我们该传递何种类型的数据进行总结。而对于datagrid我们选择用json进行返回值传递。

        形式一:

[javascript] view plain copy
 
  1. <span style="font-family:Microsoft YaHei;font-size:14px;">function SelectSubsidiary() {  
  2.     //获取类别  
  3.     var CadresType = $('#DictionaryName12').combobox('getText');  
  4.     //获取所属单位  
  5.     var SubsidiaryName = $('#UnitName1234').combobox('getText');  
  6.   
  7.     $('#dg').datagrid({  
  8.         url: '/CadresBasicInfo/SelectSubsidiaryName?CadresType=' + CadresType + '&SubsidiaryName =' + SubsidiaryName  
  9.     });  
  10.     //刷新表格  
  11.     $("#dg").datagrid("reload");  
  12. }  
  13. </span>  

       该形式直接通过JQuery EasyUI的datagrid方法进行传值,在url中需要注意当传递多个参数的时候,引号之内不能有空格,就像这样:

 

[javascript] view plain copy
 
  1. <span style="font-family:Microsoft YaHei;font-size:14px;">        url: '/CadresBasicInfo/SelectSubsidiaryName?CadresType=' + CadresType + '&SubsidiaryName =' + SubsidiaryName  
  2. </span>  
       在Controller当中我们所写的接受View的代码是这样的:
[csharp] view plain copy
 
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"> string SubsidiaryName = Request["SubsidiaryName"];</span>  
       在此处会出现一个问题,我在传值的时候注意到代码规范中“=”的两侧是要有空格的,但是实际上传到Controller中的变量却是"SubsidiaryName ",多出的一个空格,让我在传递多个参数时候在Controller中仅仅能够收到一个值,这种方式需要小心这一点。

      形式二:

[javascript] view plain copy
 
  1. <span style="font-family:Microsoft YaHei;font-size:14px;">  $.post("/CadresBasicInfo/EditCadresBasicInfo",  
  2.          {  
  3.              "sex": sex, "dictionaryname": dictionaryname, "education": education, "principle": principle, "id": id, "name": name, "position": position, "workexperience": workexperience, "birthday": birthday, "worktime": worktime, "partytime": partytime, "tel": tel  
  4.          },  
  5.   
  6.         function (result) {  
  7.   
  8.             if (result) {  
  9.                 $.messager.alert('提示消息', '县市区基本信息编辑成功!', 'info')  
  10.                 $("#editCadresBasicWindow").window("close");  
  11.                 $("#dg").datagrid("reload");  
  12.             } else {  
  13.   
  14.                 $.messager.alert('提示消息', '县市区基本信息编辑失败!', 'warning')  
  15.             }  
  16.         })  
  17. </span>  
      在js里面可以应用ajax方法,通过地址(/controllor/action),发送post或get请求,执行地址对应的control下的某个action。注意,此时传递多个参数,通过{"param1":A,"param2":B}的方式,相对于形式一url的传参方式,格式上更加合理,出错概率也低。

 

      对于Controller的返回值的处理,除了通过判断result的真假方法之外,通过写success ,complete , failed也可以来进行判断。

       

       二、loadDate方法 

 

      该方法作为datagrid表格加载的扩展,在考试系统代码中有用到:

 

[javascript] view plain copy
 
  1. <span style="font-family:Microsoft YaHei;font-size:14px;">function doSearch(value) {  
  2.     var flag=(value != "");  
  3.     if (flag) {  
  4.         var grid = $('#dg');  
  5.         var options = grid.datagrid('getPager').data("pagination").options;  
  6.         var curr = options.pageNumber;  
  7.         var pageSize = options.pageSize;  
  8.         $.ajax({  
  9.             type: "POST", //提交数据的类型 分为POST和GET  
  10.             async: false,  
  11.             url: "/QuestionType/FuzzyQueryQuestionType",  //提交url 注意url必须小写  
  12.             data: { "SearchContent": value, "pageSize": pageSize, "pageIndex": curr },  
  13.             success: function (data) {  
  14.                 var jsondata = eval(data);  
  15.                 //var jsData = (new Function("", "return " + data))();  
  16.                 $('#dg').datagrid('loadData', data);  
  17.             }  
  18.         });  
  19.         return;  
  20.     }</span>  
      显然,$('#dg').datagrid('loadDate',date)这句中的date已经在date:{"SearchContent":value,"pageSize":pageSize}规定为一个json字符串,所以LoadDate方法加载的仅仅是本地js的数据,而且最终加载的data值需要转换成json对象,而不是json字符串。

 

[javascript] view plain copy
 
  1. <span style="font-family:Microsoft YaHei;font-size:14px;">var data = '{"total":1,"rows":[{"id":"001","name":"Vincent","role":"吉他手"}]}';    
  2. data = JSON.parse(data);//转换成json对象  
  3. $('#dg').datagrid('loadData', data); </span>  
     至此,应用MVC之后对于datagrid的数据加载,目前项目中的应用就这些。