jquery+easyui+DataGrid的示例分析
小編給大家分享一下jquery+easyui+DataGrid的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
十余年的梅列網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整梅列建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“梅列網(wǎng)站設(shè)計”,“梅列網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。
一、簡單示例
HTML
<table id="tbList" striped="true" rownumbers="true" fix="true" fitcolumns="true" title="標(biāo)題"
idfield="ID" checkbox="true" url="@Url.Action("ListData")">
<thead>
<tr>
<th field="ID" checkbox="true" width="30">
</th>
<th field="Name" width="200" align="center">
名稱
</th>
</tr>
</thead>
</table>JS
$('#tbList').datagrid({ pagination: true });
$("#btnSearch").click(function () {//查詢方法
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val()} });
});二、基本用法
凍結(jié)列
$('#tbList').datagrid({ pagination: true,
frozenColumns: [[
{ field: 'BId',checkbox:'true',width:30},
{ field: 'BNo', title: '牌號', width: 100 },
{ field: 'FNo', title: '班號', width: 100 }
]],
fitColumns:false //禁止自適應(yīng)寬度、可以水平滾動
});去掉分頁
$('#tbList').datagrid({pagination: true});更改為
$('#tbList').datagrid();或
$('#tbList').datagrid({pagination: false});注意：同時需要設(shè)置table的高度，而且不能為auto
復(fù)選框以及單選
<table id="tbList" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
checkbox="true" idfield="Id" url="@Url.Action("ListData")">
<thead>
<tr>
<th field="Id" checkbox="true" width="150">
</th>
</tr>
</thead>
</table>變?yōu)閱芜x（添加singleSelect="true" ）
復(fù)制代碼 代碼如下:
<table id="tbList" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
加載數(shù)據(jù)后默認(rèn)全選：
$(document).ready(function () {
$('#tbList').datagrid({
onLoadSuccess: function (data) {
$('#tbList').datagrid('selectAll');
}
});獲取行數(shù)
$('#tbList').datagrid("getRows").length;隱藏列
<th field="Dept" width="100" hidden="true">名稱</th>
清空原有數(shù)據(jù)
方法1：
var item = $('#filegrid').datagrid('getRows');
if (item) {
for (var i = item.length - 1; i >= 0; i--) {
var index = $('#filegrid').datagrid('getRowIndex', item[i]);
$('#filegrid').datagrid('deleteRow', index);
}
}方法2：(測試過)
$('#filegrid').datagrid('loadData', { total: 0, rows: [] });解析：loadData：載入本地數(shù)據(jù)，舊記錄將被移除。
行點擊事件
$('#tbList').datagrid({ onClickRow: function () {//代碼 } });datagrip單擊行的時候，將單選按鈕設(shè)置為選中
<script type="text/javascript">
var List = {};
List.RadioFormatter = function (value, rec, index) {
return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>";
};
$(document).ready( function(){ //呈現(xiàn)列表數(shù)據(jù)
$('#tbList').datagrid({ onClickRow:
function () {
//單擊行的時候，將單選按鈕設(shè)置為選中
var id = $('#tbList').datagrid("getSelected");
$("input[name='name']").each(function () {
if ($(this).val() == id.Id) {
$(this).attr("checked", true);
}
});
}
});
});
</script>
<table id="tbList" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
<thead>
<tr>
<th field="Id" width="30" formatter="PickupList.RadioFormatter">
</th>
</tr>
</thead>
</table>table中td的時間格式問題
1.頁面
<th field="Test" formatter="Common.TimeFormatter" width="50" ></th>
2.js
var Common = {
//EasyUI用DataGrid用日期格式化
TimeFormatter: function (value, rec, index) {
if (value == undefined) {
return "";
}
/*json格式時間轉(zhuǎn)js時間格式*/
value = value.substr(1, value.length - 2);
var obj = eval('(' + "{Date: new " + value + "}" + ')');
var dateValue = obj["Date"];
if (dateValue.getFullYear() < 1900) {
return "";
}
var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式
return val.substr(11, 5);
}
};table中td內(nèi)容太長自動換行
添加屬性 nowrap="false"
將nowrap: false這個屬性設(shè)置在table的屬性中，不要設(shè)置在字段的屬性中，字段可以設(shè)置寬度，這樣就可以做到當(dāng)文字長度超過規(guī)定的寬度后自動換行了
行和復(fù)選框的分離
方法一：（1.3版本才能用）
checkOnSelect="false" selectOnCheck="false"
注意：當(dāng)使用$("#tbList").datagrid("getSelections");時候，只有行被選中，才能取到該行。一般情況，選中行時候，行為黃色背景。
eg.<table checkOnSelect="false"> </table>
var selected = $("#tbList").datagrid("getSelections");
if (selected.length == 0) {
alert("請選擇！");
return;
}
var idString = "";
$.each(selected, function (index, item) {
idString += item.Id + ",";
});方法二（1.3版本之前的解決方法）
var IsCheckFlag = true;
$('#tbList').datagrid({
pagination: true,
onClickCell: function (rowIndex, field, value) {
IsCheckFlag = false;
},
onSelect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$("#tbList").datagrid("unselectRow", rowIndex);
}
},
onUnselect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$("#tbList").datagrid("selectRow", rowIndex);
}
}
});設(shè)置數(shù)據(jù)列表的樣式
$(document).ready(function () {
//呈現(xiàn)列表數(shù)據(jù)
$('#tbList').datagrid({ pagination: true,
rowStyler: function(index,row){
if (row.ID< 10) {//那么數(shù)據(jù)的id字段小于10的，將顯示為灰色字體
return 'color:#999;';//和一般的樣式寫法一樣
}
}
});
});條件查詢
復(fù)選框的bug:使用參數(shù)查詢時候，在查詢之前選中的選項 ，在查詢之后，使用getSelections方法去獲取，依舊存在該選項
解決方案：通過unselectAll在查詢之前清空復(fù)選框即可
$("#btnSearch").click(function () {
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val() } });
});查詢bug:使用參數(shù)查詢時候，在查詢之后，顯示的當(dāng)前頁碼還是之前的 ，不會重置為1，還是之前頁碼；如果當(dāng)前總頁數(shù)為比當(dāng)前小，導(dǎo)致頁面顯示為空。比如，當(dāng)前第三頁，加入時間查詢后，只有1頁數(shù)據(jù)，那么當(dāng)前頁碼還是3，導(dǎo)致頁面顯示空白。
解決方案：設(shè)置pageNumber為 1
$("#btnSearch").click(function () {
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({ pageNumber: 1,queryParams: { SearchName: $("#SearchName").val() } });
});三、行數(shù)據(jù)的增刪改
HTML（不分頁列表）
復(fù)制代碼 代碼如下:
<table id="tbProductList" fix="true" fitcolumns="true" idfield="ID" url="@Url.Action("ListData")"></table>
JS
$(document).ready(function () {
var datagrid;
var editRow = undefined;
datagrid = $("#tbList").datagrid({
border: true,
checkbox: true,
iconCls: 'icon-save', //圖標(biāo)
nowap: true, //列內(nèi)容多時自動折至第二行
pagination: false,
rownumbers: true,
striped: true, //行背景交換
columns: [[//顯示的列
{ field: 'ID', title: '編號', width: 100, align: 'center', sortable: true, checkbox: true },
{ field: 'Name', title: '名稱', width: 100, sortable: true },
{
field: 'PriceType', title: '類型', width: 100, align: 'center',
formatter: function (value, row) { return row.TypeName; },
editor: {
type: 'combobox', options: {
valueField: 'Value',
textField: 'Text',
method: 'get',
url: $("#TypeUrl").val(),
required: true
}
}
},
{
field: 'Price', title: '價格', width: 100, align: 'center',
editor: {
type: 'numberbox', options: {
required: true,
min: 0,
precision: 2
}
}
},
{
field: 'Count', title: '數(shù)量', width: 100, align: 'center',
editor: {
type: 'numberbox', options: {
required: true,
min: 0,
precision: 0
}
}
}
]],
queryParams: { action: 'query' }, //查詢參數(shù)
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按鈕添加，修改，刪除等
//添加時先判斷是否有開啟編輯的行，如果有則把開戶編輯的那行結(jié)束編輯
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//添加時如果沒有正在編輯的行，則在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {
}
});
//將新插入的那一行開戶編輯狀態(tài)
datagrid.datagrid("beginEdit", 0);
//給當(dāng)前編輯的行賦值
editRow = 0;
}
}
}, '-',
{
text: '刪除', iconCls: 'icon-remove', handler: function () {
//刪除時先獲取選擇行
var rows = datagrid.datagrid("getSelections");
//選擇要刪除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你確定要刪除嗎?", function (r) {
if (r) {
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].ID);
}
//將選擇到的行存入數(shù)組并用,分隔轉(zhuǎn)換成字符串
if ($.trim(ids) != "") {
//---- Delete(ids.join(','));//這是post
} else {
alert("請選擇要刪除的信息！");
}
}
});
}
else {
$.messager.alert("提示", "請選擇要刪除的行", "error");
}
}
}, '-',
{
text: '修改', iconCls: 'icon-edit', handler: function () {
//修改時要獲取選擇到的行
var rows = datagrid.datagrid("getSelections");
//如果只選擇了一行則可以進行修改，否則不操作
if (rows.length == 1) {
//修改之前先關(guān)閉已經(jīng)開啟的編輯行，當(dāng)調(diào)用endEdit該方法時會觸發(fā)onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//當(dāng)無編輯行時
if (editRow == undefined) {
//獲取到當(dāng)前選擇行的下標(biāo)
var index = datagrid.datagrid("getRowIndex", rows[0]);
//開啟編輯
datagrid.datagrid("beginEdit", index);
//把當(dāng)前開啟編輯的行賦值給全局變量editRow
editRow = index;
//當(dāng)開啟了當(dāng)前選擇行的編輯狀態(tài)之后，
//應(yīng)該取消當(dāng)前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進行編輯
datagrid.datagrid("unselectAll");
}
}
}
}, '-',
{
text: '保存', iconCls: 'icon-save', handler: function () {
//保存時結(jié)束當(dāng)前編輯的行，自動觸發(fā)onAfterEdit事件如果要與后臺交互可將數(shù)據(jù)通過Ajax提交后臺
datagrid.datagrid("endEdit", editRow);
}
}, '-',
{
text: '取消編輯', iconCls: 'icon-redo', handler: function () {
//取消當(dāng)前編輯行把當(dāng)前編輯行罷undefined回滾改變的數(shù)據(jù),取消選擇的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, '-'],
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit該方法觸發(fā)此事件
//console.info(rowData);
//---- Update(ids.join(','));//這是post
editRow = undefined;
},
onDblClickRow: function (rowIndex, rowData) {
//雙擊開啟編輯行
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});看完了這篇文章，相信你對“jquery+easyui+DataGrid的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
當(dāng)前名稱：jquery+easyui+DataGrid的示例分析
文章URL：http://chinadenli.net/article28/ihdocp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站收錄、App開發(fā)、、品牌網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 手機app開發(fā)有什么商業(yè)價值 2015-12-26
- 手機網(wǎng)站制作完成綁定什么域名？ 2013-04-30
- 手機網(wǎng)站建設(shè)需要注意的事項 2022-05-24
- 設(shè)計手機網(wǎng)站時需要注意的地方 2016-11-05
- 傳統(tǒng)網(wǎng)站建設(shè)和手機網(wǎng)站有哪些不一樣 2015-09-27
- 手機網(wǎng)站建設(shè)的注意事項 2016-08-09
- 手機網(wǎng)站建設(shè)設(shè)計需要注意哪些問題？ 2013-07-26
- 手機網(wǎng)站設(shè)計注重實用,更要滿足客戶體驗 2015-12-04
- 成都手機網(wǎng)站建設(shè)要注意的要點 2017-01-03
- 手機網(wǎng)站建設(shè)怎樣才能做得更好？ 2022-05-27
- 手機網(wǎng)站建設(shè)開發(fā)的布局要點 2016-11-13
- 手機頁面設(shè)計的細(xì)節(jié) 2016-05-26