1. 程式人生 > >jQuery EasyUI DataGrid Checkbox 資料設定與取值

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結構。