Jquery使用JQgrid組件處理json數(shù)據(jù)

更新時(shí)間：2022年06月01日 15:14:32 作者：springsnow

這篇文章介紹了Jquery使用JQgrid組件處理json數(shù)據(jù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

jqGrid是Trirand軟件開(kāi)發(fā)公司的Tony Tomov開(kāi)發(fā)的一個(gè)方便人們開(kāi)發(fā)使用的web組件，它包含了許多免費(fèi)和開(kāi)源的庫(kù)如：jQuery, ThemeRoller, & jQuery UI等，同時(shí)最新的版本已經(jīng)支持bootstrapUI，Tony最初的時(shí)候是因?yàn)樗枰环N方式來(lái)表示數(shù)據(jù)庫(kù)信息，這種方式有速度上的要求同時(shí)還要獨(dú)立于服務(wù)器端技術(shù)和后臺(tái)數(shù)據(jù)庫(kù)，于是jqGrid誕生了，從最初的版本到現(xiàn)在已經(jīng)升級(jí)到了Guriddo jqGrid 5.4 ，之前的各個(gè)版本都是在不斷的修復(fù)bug以及添加符合需求的新功能。jqGrid越來(lái)越趨于完善。

jqGrid 是一個(gè)用來(lái)顯示網(wǎng)格數(shù)據(jù)的jQuery插件，通過(guò)使用jqGrid可以輕松實(shí)現(xiàn)前端頁(yè)面與后臺(tái)數(shù)據(jù)的ajax異步通信。

一、jqGrid特性

基于jquery UI主題，開(kāi)發(fā)者可以根據(jù)客戶(hù)要求更換不同的主題。
兼容目前所有流行的web瀏覽器。
Ajax分頁(yè)，可以控制每頁(yè)顯示的記錄數(shù)。
支持XML，JSON，數(shù)組形式的數(shù)據(jù)源。
提供豐富的選項(xiàng)配置及方法事件接口。
支持表格排序，支持拖動(dòng)列、隱藏列。
支持滾動(dòng)加載數(shù)據(jù)。
支持實(shí)時(shí)編輯保存數(shù)據(jù)內(nèi)容。
支持子表格及樹(shù)形表格。
支持多語(yǔ)言。
目前是免費(fèi)的。

二、調(diào)用ajax的事件順序如下：

beforeRequest
loadBeforeSend
serializeGridData--從第4項(xiàng)開(kāi)始為返回?cái)?shù)據(jù)過(guò)程的事件
loadError (if a error from the request occur - the event from steps 5 till 7 do not execute. If there is no error the event 4. does not execute and we continue to with the step 5.)
beforeProcessing
gridComplete
loadComplete

三、JQgrid處理json數(shù)據(jù)

1、定義Jqgrid

$("#tableOEE").jqGrid({
    data: [],
    datatype: "json",
    rownumbers: true, //顯示行號(hào)
    loadonce:true,//在加載完成后，datatype自動(dòng)變成local
    autowidth: true,
    pager: "#pager",
    viewrecords: true,//是否顯示總記錄數(shù)
    rowNum: 300,//表格中顯示的記錄數(shù)
    rowList: [10, 20, 30],
    height: '100%',
    gridview: true,//整個(gè)表格都構(gòu)造完成后再添加到grid中。
    jsonReader:{repeatitems:false,id:"2"},//2表示id為rowData的第三個(gè)元素。
    beforeProcessing:function(res,status,errror){
        $.each(res.rows,function(i,n){//在來(lái)自Sever的數(shù)據(jù)Grid處理之前，格式化返回的JSON數(shù)據(jù)
            n.time=Number(n.time).toExponential(3);
            n.shift=["早","中","晚"][n.shift];
        });
    },
    loadComplete:function(xhr){//Grid加載完成后，可對(duì)Grid中的元素綁定事件了。分組完成。
         $("td.tdQty").bind("click", {}, getDcData);
         var rowCount=$(this).getGridParam("records");
    },
    colModel: [{ name: 'line', index: 'line', width: 80, align: 'center', label: '產(chǎn)線(xiàn)', key:true,editable:true },//排序sidx
                { name: 'shift', index: 'shift', width: 80, align: 'center', label: '班次' },
                { name: 'remark_avai', index: 'remark_avai', label: '備注', hidden: true },
                { name: 'qty_dot', index: 'qty_dot', align: 'right', classes: 'linkbyPop tdQty', label: '總點(diǎn)數(shù)', formatter: NumFmatter },       //formatter 格式化字段,unformat:反格式化。
                ]
});

jQuery("#tableOEE").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: true, refresh: true }, 
{}, //編輯edit參數(shù)
{}, //添加add參數(shù)
{}, //刪除del參數(shù)
{ multipleSearch: true }，//搜索search參數(shù)
{closOnEscape:true}//查看view參數(shù)
);

jQuery("#tableOEE").jqGrid('setGroupHeaders', {//表頭分組
   useColSpanStyle: true,
   groupHeaders: [
     { startColumnName: 'time_avai', numberOfColumns: 1, titleText: '<em>A</em>' },
     { startColumnName: 'qty_dot', numberOfColumns: 3, titleText: '<em>F</em>' }]
});

2、重新加載數(shù)據(jù)

$("#tableOEE").jqGrid("clearGridData", true);
$("#tableOEE").jqGrid("setGridParam", { data: {...} });
//或者
$("#tableOEE").setGridParam({ datatype: "json",url: "ajax/Punch.ashx",postData:"line=aa&lot=''"});

$("#tableOEE").trigger("reloadGrid");

3、后臺(tái)處理

var GridJson=new { total="10",page="1",rows=oeeList,records=oeeList.Count.ToString()};
returnStr=new JavascriptSerialzer().Serilize(gridJson);

4、返回JSON格式：

1、當(dāng)repeatitems:false時(shí)，名稱(chēng)要與colModel中的名字一致。

{"total":"10","page":"1","rows"=[{"line":"A1","Shift":3,"qty":123,"time":0.02}],"records":"4"} //records為查詢(xún)出的總記錄數(shù)，并非本頁(yè)記錄數(shù)。

2、如果repeatitems:true(默認(rèn))

{"total":"10","page":"1","rows":[{id:"1",cell:["cell1","cell2"]},{id:"2",cell:["cell3","cell4"]}],"records":"4"}

對(duì)數(shù)字進(jìn)行千分符分割：

function getNumberSpliter(num) {
    if (num != '' && !isNaN(num)) {
        re = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
        n = String(num).replace(re, "$1,");
        return n;
    }
    else return num;
}

四、JQgrid處理Local數(shù)據(jù)

$("#tableOEE").jqGrid({
        data: [],
        datatype: "local",
        ...
});
  //獲得服務(wù)器數(shù)據(jù)
$.ajax({
    type: "GET",
    cache: false,
    url: "ajax/Punch.ashx",
    data: i,
    success: function (res) {
        if (res.indexOf("SERVER_ERROR") == -1) {
            res = $.parseJSON(res);
            $.each(res, function (i, n) {
                this.shift = Shift[this.shift];
                this.time_perdot = Number(this.time_perdot).toExponential(3);
            });
            $("#tableOEE").jqGrid("clearGridData", true);
            $("#tableOEE").jqGrid("setGridParam", { data: res });
            $("#tableOEE").trigger("reloadGrid");
            $("td.tdQty").bind("click", {}, getDcData);//綁定grid中元素事件
        }
        else {
            alert(res.replace("SERVER_ERROR", "錯(cuò)誤"));
        }
        $.unblockUI();
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus + errorThrown);
    }
});

五、JQgrid分組與行選擇

$("#tableOEE").jqGrid({
        grouping: true,
        groupingView: { groupField: ['BoxId'] },//分組
        multiselect: true,
        autowidth: true,
        //...
        colModel: [
                        { name: 'Serial', index: 'Serial', align: 'center', label: '序列號(hào)' },
                        { name: 'BoxId', index: 'BoxId', align: 'center', label: '箱號(hào)' },
                        { name: 'progress_recid', key: true, index: 'progress_recid', width: 80, align: 'center', label: '內(nèi)部號(hào)' }/
                        //key: true主鍵，服務(wù)器返回的數(shù)據(jù)沒(méi)有ID時(shí)，將此作為rowid使用。
                        ],
        onSelectRow: selectRow
});
    
var parentWidth = $("#DIV_Body").css("width").replace("px", "");
$("#tableOEE").jqGrid("setGridWidth", parentWidth);


function selectRow(rowid, status, e) {
    if (status) {
        if ($("#tableOEE").getRowData(rowid).PalLocation != "在貨倉(cāng)") {
            $("#tableOEE").setSelection(rowid, false);//取消選擇
            alert("在貨倉(cāng)狀態(tài)的卡板,只能由SIS人員操作");
        }

        var selRows = $("#tableOEE").getGridParam('selarrrow');//'selrow'最后選擇行的主鍵

        if (selRows.length > 2) {
            $("#tableOEE").setSelection(rowid, false);
                    alert("只能選擇兩個(gè)序列號(hào)更換");
        }
    }
}

六、 JQgrid構(gòu)建查詢(xún)

1、定義Jqgrid

ajax遠(yuǎn)端請(qǐng)求分頁(yè)，排序，手工構(gòu)建搜索參數(shù)，進(jìn)行服務(wù)端查詢(xún)，以及CURD操作。

$(function () {
    $("#grid").jqGrid({
        url: "/PushPDA/GetTodoLists",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['操作', 'ID', 'IP', '所屬人', '生產(chǎn)線(xiàn)', '狀態(tài)', '類(lèi)型', '更新日期', '更新時(shí)間'],
        colModel: [
            { name: 'act', index: 'act', align: 'center', width: 80, search: false, sortable: false, editable: false },
            { hidden: true, align: 'center', name: 'ID', index: 'ID', editable: true, key: true },
            { name: 'IP', align: 'center', index: 'IP', editable: true },
            { name: 'Owner', align: 'center', index: 'Owner', editable: true },
            { name: 'Line', align: 'center', index: 'Line', editable: true },
            { name: 'Status', align: 'center', index: 'Status', editable: true, },
            { name: 'Type', align: 'center', index: 'Type', editable: true, edittype: 'select', formatter: 'select', editoptions: { value: { 'CASE': '套料', 'BIG': '中大件料' } } },
            { name: 'UpdateDate', align: 'center', index: 'UpdateDate', editable: false },
            { name: 'UpdateTime', align: 'center', index: 'UpdateTime', editable: false }
        ],
        pager: jQuery('#pager'),
        rowNum: 100,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false,
        beforeProcessing: function (res) {//格式化返回?cái)?shù)據(jù)
            if (!res)
                return;
            //$.each(res.rows, function (i, n) {
            //    n.UpdateDate = DatefromJSON(n.UpdateDate);
            //    n.UpdateTime = secondToTimeString(n.UpdateTime);
            //});
        },
        gridComplete: function () {
            var ids = $("#grid").getDataIDs();//jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                be = "<input style='height:22px;width:40px;' type='button' value='編輯' onclick=\"jQuery('#grid').jqGrid('editGridRow','" + cl + "',{url: '/PushPDA/Edit',checkOnSubmit:true,checkOnUpdate:true,closeAfterEdit:true,closeOnEscape:true});\"  />";
                de = "<input style='height:22px;width:40px;' type='button' value='刪除' onclick=\"jQuery('#grid').jqGrid('delGridRow','" + cl + "',{ url: '/PushPDA/Delete', closeOnEscape:true});\"  />";
                jQuery("#grid").jqGrid('setRowData', ids[i], { act: be + de });
            }
        },
    }).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true },
        {
            // edit options
            zIndex: 100,
            url: '/PushPDA/Edit',
            closeOnEscape: true,
            closeAfterEdit: true,
            recreateForm: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // add options
            zIndex: 100,
            url: "/PushPDA/Create",
            closeOnEscape: true,
            closeAfterAdd: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // delete options
            zIndex: 100,
            url: "/PushPDA/Delete",
            closeOnEscape: true,
            closeAfterDelete: true,
            recreateForm: true,
            msg: "Are you sure you want to delete this task?",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        });
    new_search();
});

//將整數(shù)秒格式轉(zhuǎn)成時(shí)間格式。
function secondToTimeString(seconds) {
    if (seconds == null) return "";
    var hh = parseInt(seconds / 3600).toString();
    seconds -= hh * 3600;
    var mm = Math.round(seconds / 60).toString();
    if (hh.length == 1) {
        hh = "0" + hh;
    }
    if (mm.length == 1) {
        mm = "0" + mm;
    }
    return hh + "：" + mm;
}

//解析JOSN返回的日期字符串格式。
function DatefromJSON(jsonstr) {
    // return eval (jsonstr.replace(new RegExp('/Date\\((-?[0-9]+)\\)/','g'),'new Date($1)')).toLocalDateString();
    if (jsonstr == null) return "";
    d = eval('new ' + (jsonstr.replace(/\//g, '')));
    var month = (d.getMonth() + 1);
    month = ("00" + month).substr(("" + month).length);
    var day = d.getDate()
    day = ("00" + day).substr(("" + day).length);
    return d.getFullYear() + "-" + month + "-" + day;
}

2、手工構(gòu)建查詢(xún)參數(shù)

（1）單字段搜索：

主要構(gòu)建的查詢(xún)參數(shù)為searchField，searchString，searchOper

var searchPara = {   // 構(gòu)建查詢(xún)需要的參數(shù)
        searchField: "Line",
        searchString: strLines,
        searchOper: "in"
    };
// 獲得當(dāng)前postData選項(xiàng)的值
var postData = $("#grid").jqGrid("getGridParam", "postData");
// 將查詢(xún)參數(shù)融入postData選項(xiàng)對(duì)象
    $.extend(postData, searchPara);
    $("#grid").jqGrid("setGridParam", {
        url: "/PushPDA/GetTodoLists",
        search: true    //將jqGrid的search選項(xiàng)設(shè)為true
    }).trigger("reloadGrid", [{ page: 1 }]);   // 重新載入Grid表格，以使上述設(shè)置生效

（2）多字段搜索

主要構(gòu)建的查詢(xún)參數(shù)為groupOp，rules，filed,op,data.

var rules = "";
// 構(gòu)建查詢(xún)需要的參數(shù)
var searchField = "Line";
var searchString = strLines;
var searchOper = "in";
if (searchField && searchOper && searchString) { //如果三者皆有值且長(zhǎng)度大于0，則將查詢(xún)條件加入rules字符串
        rules += ',{"field":"' + searchField + '","op":"' + searchOper + '","data":"' + searchString + '"}';
    }
if (strDate1) { 
        rules += ',{"field":" IP","op":"eq","data":"' + strDate1 + '"}';
    }
if (rules) { //如果rules不為空，且長(zhǎng)度大于0，則去掉開(kāi)頭的逗號(hào)
        rules = rules.substring(1);
    }
//串聯(lián)好filtersStr字符串
var filtersStr = '{"groupOp":"AND","rules":[' + rules + ']}';
// 獲得當(dāng)前postData選項(xiàng)的值
var postData = $("#grid").jqGrid("getGridParam", "postData");
// 將查詢(xún)參數(shù)融入postData選項(xiàng)對(duì)象
    $.extend(postData, { filters: filtersStr });
    $("#grid").jqGrid("setGridParam", {
        url: "/PushPDA/GetTodoLists",
        search: true    // 將jqGrid的search選項(xiàng)設(shè)為true
    }).trigger("reloadGrid", [{ page: 1 }]);   // (7)重新載入Grid表格，以使上述設(shè)置生效

3、后臺(tái)根據(jù)查詢(xún)條件返回查詢(xún)結(jié)果

注意使用Linq語(yǔ)句，以及動(dòng)態(tài)Linq查詢(xún)。

public JsonResult GetTodoLists(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchString, string searchOper, string filters)  //Gets the todo Lists.
{
    IQueryable<PushPdaInfo> pdas = db.PushPDAs;
    IQueryable<PushPdaInfo> todoListsResults = null;
    //搜索
    if (_search)
    {
        if (!string.IsNullOrEmpty(searchField))//單字段搜索
        {
            todoListsResults = pdas.Where(p => searchString.IndexOf(p.Line) > -1);
        }
        else if (!string.IsNullOrEmpty(filters))//多字段搜索
        {
            JObject ofilters = JObject.Parse(filters);
            string searchField1;
            string searchString1;
            string sql;
            for (int i = 0; i < ofilters["rules"].Count(); i++)
            {
                searchField1 = ofilters["rules"][i]["field"].ToString();
                searchString1 = ofilters["rules"][i]["data"].ToString();
                sql = "\"" + searchString1 + "\".Contains(" + searchField1 + ")";
                todoListsResults = pdas.Where(sql);
            }
        }
    }
    else
    {
        return Json(new { }, JsonRequestBehavior.AllowGet);
    }
    //排序
    if (string.IsNullOrEmpty(sidx)) sidx = "IP";
    todoListsResults = todoListsResults.OrderBy(sidx + " " + sord);
    //分頁(yè)
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = pdas.Count();
    var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
    todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
    var todoListsResults1 = from p in todoListsResults.ToList()
                            select new
                            {
                                p.ID,
                                p.IP,
                                p.Owner,
                                p.Line,
                                p.Status,
                                p.Type,
                                UpdateDate = p.UpdateDate.HasValue ? p.UpdateDate.GetValueOrDefault().ToShortDateString() : "",
                                UpdateTime = p.UpdateTime.HasValue ? IntTimeToStringTime(p.UpdateTime.GetValueOrDefault()) : ""
                            };
    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,
        rows = todoListsResults1
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

4、定義HTML

<div id="search_container" title="Search Options">
    <div id="boxbody">
        <fieldset>
            <legend>Query IP<span id="spanClearDates">[Clear]</span></legend>
            <table>
                <tr>
                    <td><strong>掃描槍IP: </strong>
                        <input id="Text_Date1" type="text" />
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
</div>
<div>
    <table id="grid"></table>
    <div id="pager"></div>
</div>

到此這篇關(guān)于Jquery使用JQgrid組件處理json數(shù)據(jù)的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線(xiàn)工具

數(shù)據(jù)庫(kù)

CMS

常用工具

Jquery使用JQgrid組件處理json數(shù)據(jù)

目錄

一、jqGrid特性

二、調(diào)用ajax的事件順序如下：

三、JQgrid處理json數(shù)據(jù)

1、定義Jqgrid

2、重新加載數(shù)據(jù)

3、后臺(tái)處理

4、返回JSON格式：

四、JQgrid處理Local數(shù)據(jù)

五、JQgrid分組與行選擇

六、 JQgrid構(gòu)建查詢(xún)

1、定義Jqgrid

2、手工構(gòu)建查詢(xún)參數(shù)

（1）單字段搜索：

（2）多字段搜索

3、后臺(tái)根據(jù)查詢(xún)條件返回查詢(xún)結(jié)果

4、定義HTML

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

Jquery使用JQgrid組件處理json數(shù)據(jù)

目錄

一、jqGrid特性

二、調(diào)用ajax的事件順序如下：

三、JQgrid處理json數(shù)據(jù)

1、定義Jqgrid

2、重新加載數(shù)據(jù)

3、后臺(tái)處理

4、返回JSON格式：

四、JQgrid處理Local數(shù)據(jù)

五、JQgrid分組與行選擇

六、 JQgrid構(gòu)建查詢(xún)

1、定義Jqgrid

2、手工構(gòu)建查詢(xún)參數(shù)

（1）單字段搜索：

（2）多字段搜索

3、后臺(tái)根據(jù)查詢(xún)條件返回查詢(xún)結(jié)果

4、定義HTML

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

二、調(diào)用ajax的事件順序如下：

三、JQgrid處理json數(shù)據(jù)

3、后臺(tái)處理

五、JQgrid分組與行選擇

1、定義Jqgrid

3、后臺(tái)根據(jù)查詢(xún)條件返回查詢(xún)結(jié)果

4、定義HTML