jQuery EasyUI DataGrid Checkbox 資料設定與取值
純粹做個記錄，以免日後忘記該怎麼設定。
這一篇將會說明兩種使用 jQuery EasyUI DataGrid 的 Checkbox 設定方式，以及在既有資料下將 checked 為 true 的該筆資料列的 Checkbox 設定為 Checked，另外就是兩種 Checkbox 設定方式下如何取得有勾選的資料。
有關 jQuery EasyUI DataGrid 的相關資料，可以前往官網檢視，
jQuery EasyUI 官網
jQuery EasyUI Documentation
DataGrid Demo
CheckBox select on DataGrid
使用的範例 JSON 資料：
01.{
02."total": 4,
03."rows": [
04.{
05."productid":
"FI-SW-01",
06."productname":
"Koi",
07."unitcost": 10.00,
08."status":
"P",
09."listprice": 36.50,
10."attr1":
"Large",
11."itemid":
"EST-1",
12."checked":
true
13.},
14.{
15."productid":
"K9-DL-01",
16."productname":
"Dalmation",
17."unitcost": 12.00,
18."status":
"P",
19."listprice": 18.50,
20."attr1":
"Spotted Adult Female",
21."itemid":
"EST-10",
22."checked":
true
23.},
24.{
25."productid":
"RP-SN-01",
26."productname":
"Rattlesnake",
27."unitcost": 12.00,
28."status":
"P",
29."listprice": 38.50,
30."attr1":
"Venomless",
31."itemid":
"EST-11",
32."checked":
true
33.},
34.{
35."productid":
"RP-SN-01",
36."productname":
"Rattlesnake",
37."unitcost": 12.00,
38."status":
"P",
39."listprice": 26.50,
40."attr1":
"Rattleless",
41."itemid":
"EST-12",
42."checked":
false
43.}
44.]
45.}
設定方式一：使用預設的設定方式
網頁的 HTML 原始碼內容
01.<body>
02.<h2>Custom CheckBox on DataGrid</h2>
03.
04.<input
type="button"
id="ButonGetCheck"
value="Get Checked"
/>
05.<br/><br/>
06.
07.<table
id="dg"></table>
08.
09.</body>
我是習慣把 DataGrid 的相關設定放在 Javascript 程式中，因為這會比直接在 HTML 的 Table Tag 使用屬性設定的方式還具有彈性，
Javascript 程式中的 DataGrid 設定
01.$('#dg').datagrid({
02.title:
'CheckBox Selection on DataGrid',
03.url:
'datagrid_data3.json',
04.width:
'700',
05.rownumbers:
true,
06.columns:[[
07.{ field:'ck',checkbox:true
},
08.{ field:
'productid', title:
'productid' },
09.{ field:
'productname', title:
'productname' },
10.{ field:
'unitcost', title:
'unitcost' },
11.{ field:
'status', title: 'status'
},
12.{ field:
'listprice', title:
'listprice' },
13.{ field:
'itemid', title: 'itemid'
}
14.]],
15.singleSelect:
false,
16.selectOnCheck:
true,
17.checkOnSelect:
true
18.});
設定完成後的頁面如下：
但是我們的 JSON 資料裡有個欄位是「checked」，這個欄位的資料 true / false 就是用來設定 Checkbox 是否勾選，而設定的動作必須要在 DataGrid 載入資料完成後再去執行，這邊會使用到 jQuery 的 each 去逐一檢查每個資料列的的資料內容，假如 checked 為 true，那就使用「checkRow」這個 Method 將該資料列的 Checkbox 設為勾選的狀態，
修改後的 DataGrid 設定程式如下：
01.$('#dg').datagrid({
02.title:
'CheckBox Selection on DataGrid',
03.url:
'datagrid_data3.json',
04.width:
'700',
05.rownumbers:
true,
06.columns:[[
07.{ field:'ck',checkbox:true
},
08.{ field:
'productid', title:
'productid' },
09.{ field:
'productname', title:
'productname' },
10.{ field:
'unitcost', title:
'unitcost' },
11.{ field:
'status', title: 'status'
},
12.{ field:
'listprice', title:
'listprice' },
13.{ field:
'itemid', title: 'itemid'
}
14.]],
15.singleSelect:
false,
16.selectOnCheck:
true,
17.checkOnSelect:
true,
18.onLoadSuccess:function(data){
19.if(data){
20.$.each(data.rows,
function(index, item){
21.if(item.checked){
22.$('#dg').datagrid('checkRow',
index);
23.}
24.});
25.}
26.}
27.});
重新執行頁面後就可以看到 checked 為 true 的資料列 Checkbox 都為勾選，
再來就是要取得勾選的資料值，這邊也是使用 DataGrid 所提供的 Method「getChecked」 www.it165.net
程式如下：
1.$('#ButonGetCheck').click(function(){
2.var
checkedItems = $('#dg').datagrid('getChecked');
3.var
names = [];
4.$.each(checkedItems,
function(index, item){
5.names.push(item.productname);
6.});
7.console.log(names.join(","));
8.});
最後的執行結果：
方式一的完整 Javascript 程式：
01.$('#dg').datagrid({
02.title:
'CheckBox Selection on DataGrid',
03.url:
'datagrid_data3.json',
04.width:
'700',
05.rownumbers:
true,
06.columns:[[
07.{ field:'ck',checkbox:true
},
08.{ field:
'productid', title:
'productid' },
09.{ field:
'productname', title:
'productname' },
10.{ field:
'unitcost', title:
'unitcost' },
11.{ field:
'status', title: 'status'
},
12.{ field:
'listprice', title:
'listprice' },
13.{ field:
'itemid', title: 'itemid'
}
14.]],
15.singleSelect:
false,
16.selectOnCheck:
true,
17.checkOnSelect:
true,
18.onLoadSuccess:function(data){
19.if(data){
20.$.each(data.rows,
function(index, item){
21.if(item.checked){
22.$('#dg').datagrid('checkRow',
index);
23.}
24.});
25.}
26.}
27.});
28.
29.$('#ButonGetCheck').click(function(){
30.var
checkedItems = $('#dg').datagrid('getChecked');
31.var
names = [];
32.$.each(checkedItems,
function(index, item){
33.names.push(item.productname);
34.});
35.console.log(names.join(","));
36.});
設定方式二：不使用預設的設定方式與 Method
這個設定的方式應該是在 jQuery EasyUI 1.3 之前所使用的，因為早期的版本並沒有足夠的設定方式與 Method 讓使用者可以去增加 Checkbox 的專案，這邊所使用的 JSON 資料以及 HTML 原始碼都跟設定方式一的內容是一樣的，不一樣的地方在於 Javascript 程式的部份，
先看 DataGrid 的設定
01.$('#dg').datagrid({
02.title:
'CheckBox Selection on DataGrid',
03.url:
'datagrid_data3.json',
04.width:
'700',
05.rownumbers:
true,
06.columns:[[
07.{field:'checked',formatter:function(value,row,index){
08.if(row.checked){
09.return
'<input type="checkbox" name="DataGridCheckbox" checked="checked">';
10.}
11.else{
12.return
'<input type="checkbox" name="DataGridCheckbox">';
13.}
14.}},
15.{ field:
'productid', title:
'productid' },
16.{ field:
'productname', title:
'productname' },
17.{ field:
'unitcost', title:
'unitcost' },
18.{ field:
'status', title: 'status'
},
19.{ field:
'listprice', title:
'listprice' },
20.{ field:
'itemid', title: 'itemid'
}
21.]],
22.singleSelect:
true
23.});
這邊的 Checkbox 設定則是使用 formatter 的方式，類似 ASP.NET GridView 的 ItemTemplate 設定方式，判斷每個資料列的 checked 欄位資料是否為 true，如 checked 為 true 則回傳一個有勾選的 Checkbox，不過這樣的設定方式就不會在 DataGrid 的欄位名稱列出現可讓使用者全選的 Checkbox，如需要的話就必須再用其它的方式來做設定，不過這邊就不介紹，
接著就是取得有勾選的資料值，因為這裡是使用自己加入 checkbox tag 的方式，所以就無法使用 DataGrid 所提供的 getChecked 方法，而是必須要另外寫程式來處理，可以使用 extend 的方式去擴充 DataGrid 的方法，
程式如下：01.$.extend($.fn.datagrid.methods, {
02.getChecked:
function (jq) {
03.var
rr = [];
04.var
rows = jq.datagrid('getRows');
05.jq.datagrid('getPanel').find('div.datagrid-cell
input:checked').each(function
() {
06.var
index = $(this).parents('tr:first').attr('datagrid-row-index');
07.rr.push(rows[index]);
08.});
09.return
rr;
10.}
11.});
這麼一來在取得 DataGrid 的 Checkbox 有勾選的資料值就可以沿用方式一的程式，
1.$('#ButonGetCheck').click(function(){
2.var
checkedItems = $('#dg').datagrid('getChecked');
3.var
names = [];
4.$.each(checkedItems,
function(index, item){
5.names.push(item.productname);
6.});
7.console.log(names.join(","));
8.});
執行結果：
完整 Javascript 程式如下：
01.$(function(){
02.$('#dg').datagrid({
03.title:
'CheckBox Selection on DataGrid',
04.url:
'datagrid_data3.json',
05.width:
'700',
06.rownumbers:
true,
07.columns:[[
08.{field:'checked',formatter:function(value,row,index){
09.if(row.checked){
10.return
'<input type="checkbox" name="DataGridCheckbox" checked="checked">';
11.}
12.else{
13.return
'<input type="checkbox" name="DataGridCheckbox">';
14.}
15.}},
16.{ field:
'productid', title:
'productid' },
17.{ field:
'productname', title:
'productname' },
18.{ field:
'unitcost', title:
'unitcost' },
19.{ field:
'status', title: 'status'
},
20.{ field:
'listprice', title:
'listprice' },
21.{ field:
'itemid', title: 'itemid'
}
22.]],
23.singleSelect:
true
24.});
25.
26.$('#ButonGetCheck').click(function(){
27.var
checkedItems = $('#dg').datagrid('getChecked');
28.var
names = [];
29.$.each(checkedItems,
function(index, item){
30.names.push(item.productname);
31.});
32.console.log(names.join(","));
33.});
34.});
35.
36.$.extend($.fn.datagrid.methods, {
37.getChecked:
function (jq) {
38.var
rr = [];
39.var
rows = jq.datagrid('getRows');
40.jq.datagrid('getPanel').find('div.datagrid-cell
input:checked').each(function
() {
41.var
index = $(this).parents('tr:first').attr('datagrid-row-index');
42.rr.push(rows[index]);
43.});
44.return
rr;
45.}
46.});
相關推薦
jQuery EasyUI DataGrid Checkbox 資料設定與取值
純粹做個記錄，以免日後忘記該怎麼設定。 這一篇將會說明兩種使用 jQuery EasyUI DataGrid 的 Checkbox 設定方式，以及在既有資料下將 checked 為 true 的該筆資料列的 Checkbox 設定為 Checked，另外就是兩種 Check
【顆粒歸倉】（一）jQuery easyui datagrid 的資料載入
其實easyuidatagrid載入資料只有兩種方式：一種是ajax載入目標url返回的json資料；另一種是載入js物件，也就是使用loadDate方法，這種方法用於載入本地js資料（非url呼叫）。在專案中我用到的以及研究別人程式碼中用到的普遍是第一種，下
jquery easyui-datagrid 如何清空資料
//清空原有資料 方法1： var item = $('#filegrid').datagrid('getRows'); if (item) { for (var i = item.length - 1; i >= 0; i--
jquery easyui datagrid 遠端載入資料----javascript法
jquery easyui有三種辦法生成datagrid（資料網格），本篇專門討論javascript藉助jquey easy ui實現的方式 html部分 <main role="main" class="container"> <div
jquery easyui datagrid 遠端載入資料----把主鍵渲染為值遇到的問題及解決方案
起因：資料庫中一些欄位存的是代表具體值的數字，需要渲染為具體值 monggodb中的字典 mysql中存放的值為：expertin代表教練擅長的搏擊技能 jquery easyui中的相關程式碼如下：用於載入字典中的資料，注意：這一ajax請求必須設定為同步（async:false），
easyui DataGrid checkbox 根據後臺傳遞過來的資料進行勾選
function loadMessage() { $('#pressure').datagrid({ height: 500, url: '/Home/Realt
js--easyUI----jQuery easyui datagrid 點選某個單元格即進入編輯狀態，焦點移開後，儲存資料
以上為轉載內容，以下為自己驗證程式碼： function _createTable(data){ //對漢字進行轉碼 $.each(data.data, function(i, obj){ var eventName = unescape(ob
jQuery選擇器----------jquery實現select下拉框的取值與賦值，設定選中的方法大全
// 1.判斷select選項中 是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.opt
jquery easyui datagrid 資料繫結java版本
前端設定datagrid程式碼 $("#invitation").datagrid({ width:"auto", height:"auto", nowrap: false, striped: true, //url:"datagrid_data.
動態控制jQuery easyui datagrid工具欄顯示隱藏
第一條 button 一個 按鈕 yui query 控制 show disable //隱藏第一個按鈕 $(‘div.datagrid-toolbar a‘).eq(0).hide(); //隱藏第一條分隔線 $(‘div.datagrid-toolbar div‘).e
jQuery EasyUI---DataGrid
ebo out xmlns tar utf select 基本 yui round <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</t
easyui datagrid checkbox選中事件
script icon alert -i tab amp sel url style $(‘#grid_Order‘).datagrid({ onCheck: function(index, data) { //alert(data[0]);
jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條
p s load grid 技術 如果 fan 垂直滾動條 收藏 解決 jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條 ============================== 蕃薯耀 2018年2月6日 http://www
jquery easyui datagrid實現數據改動
art 圖片 statistic sta mod b2c tracking tex grid 1、單擊選中待改動行2、使用單獨對話框改動數據3、使用updateRow
jquery easyui datagrid/table 右邊線顯示不全
eight AI 分享 inf jquer alt 顯示 col info <table id="dg" style="height:400px"></table> 右邊線顯示不全 解決：在外面套一個panel，邊框隱藏：border:hidden
jquery-easyUi datagrid 基本用法
首先引入相應的css 和jq 指令碼 <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/themes/icon.css"
jquery easyui datagrid columns日期格式化問題
使用easyui的datagrid，從後端返回的json字串中的日期，直接賦值到createtime這個column時，出現了錯誤顯示。 顯示的樣子是：[object Object]。明顯是一個物件，使用formatter做了格式化後， { &nbs
EasyUI DataGrid 多級表頭設定
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
jquery easyUI ajax載入資料分頁功能
分享一下我老師大神的人工智慧教程吧。零基礎，通俗易懂！風趣幽默！http://www.captainbed.net/ 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
jQuery EasyUI Datagrid元件的完整的基礎DOM結構
標題可能有點長，什麼叫“完整的基礎DOM結構”，這裡“基礎”的意思是指這個結構不依賴具體資料，不依賴Datagrid的view屬性，只要存在Datagrid例項就會存在這樣的基礎DOM結構；而“完整”的意思是指在凍結列，凍結行，標題，footer，分頁這些功能塊都存在時候的DOM結構。