jqgrid加载本地数据/後台數據,動態從後台獲取列名

m0_60746184

已于 2024-07-01 17:33:40 修改

阅读量74

点赞数 1

文章标签： windows 服务器前端

于 2024-07-01 17:08:47 首次发布

本文链接：https://blog.csdn.net/m0_60746184/article/details/140105648

版权

jqgrid页面容器div

<div id="grid_List">

        <table id="gridTable" width="100%">
        </table>
        <div id="gridPager" style="width: 100%;">
        </div>
    </div>

獲取後台數據

 //js获取网站根路径(站点及虚拟目录)
    function GetRootPath() {
        var LocationPath = window.document.location.href;
        var LocationPathName = window.document.location.pathname;
        var prePath = LocationPath.substring(0, LocationPath.indexOf(LocationPathName));
        //return (prePath);//不使用WebPageName
        return (prePath + "/WebPageName");//使用WebPageName，域名版
        
    }
function GetAjaxData(url, postData, callBack) {
        $.ajax({
            url: GetRootPath() + url,
            type: "post",
            data: postData,
            dataType: "json",
            async: false,
            cache: false,
            beforeSend: function (xmlHttp) {
                xmlHttp.setRequestHeader("If-Modified-Since", "0");
                xmlHttp.setRequestHeader("Cache-Control", "no-cache");
            },
            success: function (data) {
                if (data.Code == "-1") {
                    Loading(false);
                    top.$.dialog.tips(data.Message, 1, 'fail');
                } else {
                    Loading(false);
                    callBack(data);
                }
            },
            error: function (data) {
                Loading(false);
            }
        });
    }

jqgrid加载本地数据/後台數據,動態從後台獲取列名

//jqgrid加载本地数据/後台數據,動態從後台獲取列名
    function GetGrid() {
        $("#grid_List").empty();
        $("#grid_List").html("<table id='gridTable' style=\"width:100 %\"></table ><div id='gridPager'  style=\"width:100 %\"></div >");
        var data1 = $("#data1").val();
        var data2 = $("#data2").val();
        var data3 = $("#data3").val();

        var DataJsondata = null;
        var model = [];
        var post = {
            data1: data1,
            data2: data2,
            data3: data3
        }
        GetAjaxData("/Controller_Name/Get_DATA", post, function (DataJson) {
            if (DataJson.length > 0) {
                DataJsondata = DataJson;
                var DataJsoncols = Object.keys(DataJson[0]);
                $.each(DataJsoncols, function (i) {
                    var ColName = DataJsoncols[i];//取列名
                    if (ColName.indexOf("時間") > -1) {
                        model.push({
                            label: ColName, name: ColName, index: ColName, width: 180, align: 'center',
                            formatter: function (cellvalue) {
                                return formatDate(cellvalue, 'yyyy-MM-dd hh:mm:ss'); //格式化時間
                            }
                        });
                    }
                    else {
                        model.push({
                            label: ColName, name: ColName, index: ColName, width: 100, align: 'center'
                        });
                    }
                })
                $("#gridTable").jqGrid({
                    data: DataJsondata,
                    //url:"/Controller_Name/Get_DATA?data1=" + data1 + "&data2=" + data2 + "&data3=" + data3,
                    //datatype : "json",//使用json访问后台地址url
                    datatype: "local",//加载本地数据
                    height: $(window).height() - 110,
                    autowidth: true,
                    colModel: model,
                    viewrecords: true,
                    rowNum: 1000,
                    rowList: [100, 500, 1000, 3000, 5000],
                    pager: "#gridPager",
                    rownumbers: true,
                    shrinkToFit: false,
                    gridview: true
                });
                //自应高度
                $(window).resize(function () {
                    $("#gridTable").setGridHeight($(window).height() - 110);
                });
            }
        })
    }