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的數據加載，目前項目中的應用就這些。