easyui datatable ajax 加载数据,easyui datagrid 動態列和前端分頁，以及加載Datatable

最新推荐文章于 2024-08-21 08:51:48 发布

浮梦绝离殇

最新推荐文章于 2024-08-21 08:51:48 发布

阅读量351

点赞数

文章标签： easyui datatable ajax 加载数据

項目中用到一個執行SQL，展示結果的功能。所以需要動態改變datagrid的列，最好是使用后台分頁，但沒找到方法，所以使用了前端分頁。

后台代碼：

StringBuilder columns = new StringBuilder("[[");foreach (DataColumn col in ds.Tables[0].Columns)

columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',width:{2}}},", col.ColumnName, col.ColumnName, 100);if (ds.Tables[0].Columns.Count > 0)

columns.Remove(columns.Length- 1, 1);//去除多余的','號

columns.Append("]]");

Dictionary objDic = new Dictionary();

objDic.Add("columns", columns.ToString());

objDic.Add("rows", ds.Tables[0]);this.Context.Response.Write(JsonConvert.SerializeObject(new JSON(true, objDic, "")));

JSON是我自定義的一個類，objDic對應其obj屬性。拼接好datagrid需要的列字符串，在前端使用 eval方式轉成對象

var opt = $(dg).datagrid('options');

opt.columns= eval(result.obj.columns); //把返回的數組字符串轉為對象，並賦於datagrid的column屬性

opt.title = "SQL:" +sql;

$(dg).datagrid(opt);

只用ado.net查詢出來的DataTable直接序列化是沒有datagrid需要的total和rows兩個屬性的，所以在前端要定義一個對象付給datagrid

var data = newObject();

data.total=result.obj.rows.length;

data.rows=result.obj.rows;

$(dg).data().datagrid.cache=data;

$(dg).datagrid('reload');//$(dg).datagrid('loadData', result.obj.rows); //這樣是不行的

cache不是datagrid默認的屬性，這里是為了前端分頁自定義的一個數據存儲屬性。調用reload方法時會觸發Datagrid的loader(據說這個屬性在datagrid1.3.1后才有的，我用的就是1.3.1版本)。

下面看看datagrid的初始化代碼:

//初始化數據列表

functioninitDatagrid() {/// 初始化數據列表

$(dg).datagrid({

fit:true, border: false, striped: true, pagination: true, checkOnSelect: true, selectOnCheck: true, singleSelect: true, nowrap: true, rownumbers: true,

title:"數據表:(請選擇)",

width:500, height: 350, pageSize: 20, pageList: [10, 20, 30, 40, 50],

loader: DatagridFrontPageLoader2//前端分頁

});

}

定義了loader屬性，然后看看DatagridFrontPageLoader2里是怎么寫的

/**

* @author 趙保龍

* @requires jQuery

* Datagrid前端分頁加載器,使用 loadData加載數據時使用*/

functionDatagridFrontPageLoader2(param, success, error) {var that = $(this);var cache =that.data().datagrid.cache;if(cache) {

success(bulidData(cache));

}else{return false;

}functionbulidData(data) {var temp =$.extend({}, data);var tempRows =[];var start = (param.page - 1) *parseInt(param.rows);var end = start +parseInt(param.rows);var rows =data.rows;for (var i = start; i < end; i++) {if(rows[i]) {

tempRows.push(rows[i]);

}else{break;

}

temp.rows=tempRows;returntemp;

}

首先通過cache屬性獲取所有數據，然后再bulidData函數中選取當前頁需要的數據，傳給success加載。

點擊前端的上一頁、下一頁、刷新等按鈕都會觸發這個處理函數，而不去遠程加載數據。

這個函數式通過修改孫宇的方法而來的，他那個可以到遠程加載數據，不適用與我這的情況所以改了一下。

/**

* @author 孫宇

* @requires jQuery

* Datagrid前端分頁加載器,使用 url加載數據時使用*/