【颗粒归仓】(一)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进行返回值传递。

形式一:

<span style="font-family:Microsoft YaHei;font-size:14px;">function SelectSubsidiary() {
    //获取类别
    var CadresType = $('#DictionaryName12').combobox('getText');
    //获取所属单位
    var SubsidiaryName = $('#UnitName1234').combobox('getText');

    $('#dg').datagrid({
        url: '/CadresBasicInfo/SelectSubsidiaryName?CadresType=' + CadresType + '&SubsidiaryName =' + SubsidiaryName
    });
    //刷新表格
    $("#dg").datagrid("reload");
}
</span>

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

<span style="font-family:Microsoft YaHei;font-size:14px;">        url: '/CadresBasicInfo/SelectSubsidiaryName?CadresType=' + CadresType + '&SubsidiaryName =' + SubsidiaryName
</span>

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

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

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

形式二:

<span style="font-family:Microsoft YaHei;font-size:14px;">  $.post("/CadresBasicInfo/EditCadresBasicInfo",
         {
             "sex": sex, "dictionaryname": dictionaryname, "education": education, "principle": principle, "id": id, "name": name, "position": position, "workexperience": workexperience, "birthday": birthday, "worktime": worktime, "partytime": partytime, "tel": tel
         },

        function (result) {

            if (result) {
                $.messager.alert('提示消息', '县市区基本信息编辑成功!', 'info')
                $("#editCadresBasicWindow").window("close");
                $("#dg").datagrid("reload");
            } else {

                $.messager.alert('提示消息', '县市区基本信息编辑失败!', 'warning')
            }
        })
</span>

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

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

二、loadDate方法

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

<span style="font-family:Microsoft YaHei;font-size:14px;">function doSearch(value) {
    var flag=(value != "");
    if (flag) {
        var grid = $('#dg');
        var options = grid.datagrid('getPager').data("pagination").options;
        var curr = options.pageNumber;
        var pageSize = options.pageSize;
        $.ajax({
            type: "POST", //提交数据的类型 分为POST和GET
            async: false,
            url: "/QuestionType/FuzzyQueryQuestionType",  //提交url 注意url必须小写
            data: { "SearchContent": value, "pageSize": pageSize, "pageIndex": curr },
            success: function (data) {
                var jsondata = eval(data);
                //var jsData = (new Function("", "return " + data))();
                $('#dg').datagrid('loadData', data);
            }
        });
        return;
    }</span>

显然,$(‘#dg‘).datagrid(‘loadDate‘,date)这句中的date已经在date:{"SearchContent":value,"pageSize":pageSize}规定为一个json字符串,所以LoadDate方法加载的仅仅是本地js的数据,而且最终加载的data值需要转换成json对象,而不是json字符串。

<span style="font-family:Microsoft YaHei;font-size:14px;">var data = '{"total":1,"rows":[{"id":"001","name":"Vincent","role":"吉他手"}]}';
data = JSON.parse(data);//转换成json对象
$('#dg').datagrid('loadData', data); </span>

至此,应用MVC之后对于datagrid的数据加载,目前项目中的应用就这些。

时间: 2024-08-03 15:06:37

【颗粒归仓】(一)jQuery easyui datagrid 的数据加载的相关文章

谈谈easyui datagrid 的数据加载(转)

这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程中容易产生的误区做较为详细的描述,希望能对大家有所帮助. url方式加载数据 调用方式 目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将

谈谈easyui datagrid 的数据加载

文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程

easyui datagrid 的数据加载Json数据

var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('#tt').datagrid('loadData',obj);

jquery easyui datagrid 分页数据请求

jquery easyui datagrid内置了分页的功能,当设置为 pagination: true 以后就能够启用分页功能. 启用分页以后,jquery easyui datagrid发送的数据请求中会包含两个参数: int iPageIndex = Convert.ToInt32(this.Request["page"]); int iPageSize = Convert.ToInt32(this.Request["rows"]); 这两个参数分别是当前页码

easyui中的datagrid的数据加载的问题

我们在第一次使用easyui的datagrid的url加载所需的数据时,如果第二次加载数据我们使用的不是ulr而是数据返回结果进行加载的时候$("#div").datagird('loadData',data)就如同这样,我们是不能将最新的数据加载上的,表单加载的数据仍然是原来的数据,因为url还是原来的url,datagrid会按照原来的数据进行加载,这时候我们如果想要加载数据的时候可以使用$("#div").datagrid({url,"",

JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插件,然后就开始写了.写下来这么一个插件,稍作优化,就在项目中使用了.下面贴的是我写这个插件时的测试图: 这张图模拟数据加载前提示框的展示,这个表格是一个写在页面上的.蓝色的底纹就是遮罩层. (function($){ $.fn.extend({ /** * 打开遮罩,并显示一段文字. * @para

Jquery EasyUI datagrid后台数据表格生成及分页详解

由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而且容易上手.今天就把自己在项目中用到的功能做了一个总结.生成数据表格如下所示: 接下来上代码 界面html及js代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/>

ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理

ThinkPHP和jQuery EasyUI这两个都是不错的框架,现在要把它两个整合到一块,做个简单的Ajax调用查询. 在ThinkPHP模板中引入EasyUI的相关文件,然后设置按钮3的调用: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &

EasyUI - DataGrid 组建 - [ 组件加载和排序 ]

效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html代码: <table id="tab"></table> JS代码: 此时显示的列名称,对应的是JSON数据中的列名称. $(function () { $('#tab').datagrid({ width: 500,//宽度 title: '信息列表',//标题名