jQuery easyui datagrid 的数据加载

其实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进行返回值传递。

形式一：

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. $(‘#dg’).datagrid({
7. url: ‘/CadresBasicInfo/SelectSubsidiaryName?CadresType=’ + CadresType + ‘&SubsidiaryName =’ + SubsidiaryName
8. });
9. //刷新表格
10. $(“#dg”).datagrid(“reload”);
11. }
12. </span>

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

1. <span style=”font-family:Microsoft YaHei;font-size:14px;”>        url: ‘/CadresBasicInfo/SelectSubsidiaryName?CadresType=’ + CadresType + ‘&SubsidiaryName =’ + SubsidiaryName
2. </span>

在Controller当中我们所写的接受View的代码是这样的：

1. <span style=”font-family:Microsoft YaHei;font-size:14px;”> string SubsidiaryName = Request[“SubsidiaryName”];</span>

在此处会出现一个问题，我在传值的时候注意到代码规范中“=”的两侧是要有空格的，但是实际上传到Controller中的变量却是”SubsidiaryName
“，多出的一个空格，让我在传递多个参数时候在Controller中仅仅能够收到一个值，这种方式需要小心这一点。

形式二：

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. function (result) {
6. if (result) {
7. $.messager.alert(‘提示消息’, ‘县市区基本信息编辑成功！’, ‘info’)
8. $(“#editCadresBasicWindow”).window(“close”);
9. $(“#dg”).datagrid(“reload”);
10. } else {
11. $.messager.alert(‘提示消息’, ‘县市区基本信息编辑失败！’, ‘warning’)
12. }
13. })
14. </span>

在js里面可以应用ajax方法，通过地址（/controllor/action），发送post或get请求,执行地址对应的control下的某个action。注意，此时传递多个参数，通过{“param1″:A,”param2”:B}的方式，相对于形式一url的传参方式，格式上更加合理，出错概率也低。

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

二、loadDate方法

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

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字符串。

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的数据加载，目前项目中的应用就这些。