EasyUI 筆記（2）datagrid 使用

1.js

$(function () {

$("#dg").datagrid({
rownumbers: true,//顯示行號
pagination: true, //顯示分頁
fitColumns: false,
//fit: true,
striped: true,//行漸變
pageSize: 20,//頁大小
pageList: [20, 50, 80, 100, 150],
loadMsg: '資料載入中...',
method: 'get',
toolbar: '#tb',//設定工具條
idField: 'RN', //主鍵Id 該值不能為重複值。否則有些操作無法實現
url: 'YBZDFWXZPage.aspx?action=query&Random=' + Math.random(), //從遠端站點請求資料的 URL。引數中加入隨機數防止頁面不重新整理
columns: [[

{ field: 'GLCZName', title: '站名', width: 150 },
{
field: 'CKS', title: '起點', width: 50,
formatter: function (val, rec) {
if (val == "1") {
return " <input type=\"checkbox\" id=\"CKS\" value=\"" + rec.GLCZ + "\" name=\"" + rec.DDSK + "\" checked=\"checked\" />";
}
else {
return " <input type=\"checkbox\" id=\"CKS\" value=\"" + rec.GLCZ + "\" name=\"" + rec.DDSK + "\" />";
}

}
},
{
field: 'CKE', title: '終點', width: 50,
formatter: function (val, rec) {
if (val == "1") {
return " <input type=\"checkbox\" id=\"CKE\" value=\"" + rec.GLCZ + "\" name=\"" + rec.DDSK + "\" checked=\"checked\" />";
}
else {
return " <input type=\"checkbox\" id=\"CKE\" value=\"" + rec.GLCZ + "\" name=\"" + rec.DDSK + "\" />";
}
}
},

]]
});
// 載入水庫
LoadSK();

});

另：CKS CKE 兩列加入了checkbox

2.頁面如上述js所示以 id為tb的div作為 datagrid的工具條

3.重新整理資料

// js方法

var checkText = $("#sk").find("option:selected").text(); //獲取Select選擇的Text
var checkValue = $("#sk").val(); //獲取Select選擇的Value
$("#dg").datagrid({ url: 'YBZDFWXZPage.aspx?action=query&stime=' + $("#StartTime").datebox("getValue") + '&skstcd=' + checkValue + '&Random=' + Math.random() });

// 後臺程式碼

#region 根據所選水庫和釋出時間取得相應資料
/// <summary>
/// 根據所選水庫和釋出時間取得相應資料
/// </summary>
private void Select()
{
string stime = Request.QueryString["stime"];
if (!string.IsNullOrEmpty(stime))
{
DateTime dt = DateTime.Now;
if (DateTime.TryParse(stime, out dt))
{
stime = dt.ToString("yyyy-MM-dd");
}
else
{ stime = ""; }
}
string skstcd = Request.QueryString["skstcd"];

int pageIndex = 1; int pageSize = 20;
string page = Request.QueryString["page"];
string rows = Request.QueryString["rows"];
if (!string.IsNullOrEmpty(page)) pageIndex = Convert.ToInt32(page);
if (!string.IsNullOrEmpty(rows)) pageSize = Convert.ToInt32(rows);
int pageCount = 0;
YBZDModule info = new YBZDModule();
//YBDataInfo info = new YBDataInfo();
info.StartTime = stime;
info.DDSK = skstcd;
List<YBZDModule> lstYBZD = new List<YBZDModule>();
lstYBZD = _BLL.Select(info, pageIndex, pageSize, out pageCount);

StringBuilder sbjson = new StringBuilder();
sbjson.Append("{\"rows\":");
string jsonResult = JsonConvert.SerializeObject(lstYBZD);
sbjson.Append(jsonResult);
sbjson.Append(",\"total\":" + pageCount + "}");
Response.Write(sbjson);
Response.End();
}
#endregion

使用Newtonsoft.Json.dll將實體封裝為json字串

EasyUI 筆記（2）datagrid 使用

相關文章