JQuery EasyUI學(xué)習(xí)教程之datagrid 添加、修改、刪除操作
一篇關(guān)于JQueryEasyUI學(xué)習(xí)之datagrid 添加、修改、刪除 學(xué)習(xí)筆記教程有需要了解的朋友可參考本的筆記,批量刪除,雙擊表單修改、選中行修改,增加行修改,再有就是擴(kuò)展editor的方法,無需廢話,直接上代碼,代碼中的注釋寫的很詳細(xì)
<script type="text/javascript" charst="utf-8">var editFlag = undefined;//設(shè)置一個(gè)編輯標(biāo)記 //因?yàn)閘ayout框架指向href時(shí),只取html頁面body中間的部分,所以該頁面這樣寫即可 //有datagrid包含屬性較多,所以盡量使用js的方式初始化datagrid框架 $(function () { $("#dg").datagrid({ url: "GetJson.ashx", //指向一個(gè)一般處理程序或者一個(gè)控制器,返回?cái)?shù)據(jù)要求是Json格式,直接賦值Json格式數(shù)據(jù)也可,我以demo中自帶的Json數(shù)據(jù)為例,就不寫后臺(tái)代碼了,但是我會(huì)說下后臺(tái)返回的注意事項(xiàng) iconCls: "icon-add", fitColumns: false, //設(shè)置為true將自動(dòng)使列適應(yīng)表格寬度以防止出現(xiàn)水平滾動(dòng),false則自動(dòng)匹配大小 //toolbar設(shè)置表格頂部的工具欄,以數(shù)組形式設(shè)置 idField: 'id', //標(biāo)識(shí)列,一般設(shè)為id,可能會(huì)區(qū)分大小寫,大家注意一下 loadMsg: "正在努力為您加載數(shù)據(jù)", //加載數(shù)據(jù)時(shí)向用戶展示的語句 pagination: true, //顯示最下端的分頁工具欄 rownumbers: true, //顯示行數(shù) 1,2,3,4... pageSize: 10, //讀取分頁條數(shù),即向后臺(tái)讀取數(shù)據(jù)時(shí)傳過去的值 pageList: [10, 20, 30], //可以調(diào)整每頁顯示的數(shù)據(jù),即調(diào)整pageSize每次向后臺(tái)請(qǐng)求數(shù)據(jù)時(shí)的數(shù)據(jù) //由于datagrid的屬性過多,我就不每個(gè)都介紹了,如有需要,可以看它的API sortName: "name", //初始化表格時(shí)依據(jù)的排序 字段 必須和數(shù)據(jù)庫中的字段名稱相同 sortOrder: "asc", //正序 columns: [[ { field: 'code', title: 'Code', width: 100, editor: {//設(shè)置其為可編輯 type: 'validatebox',//設(shè)置編輯樣式 自帶樣式有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree 可自行擴(kuò)展 options: {} } }, { field: 'name', title: 'Name', width: 100, sortable: true, editor: {//設(shè)置其為可編輯 type: 'validatebox',//設(shè)置編輯格式 options: { required: true//設(shè)置編輯規(guī)則屬性 } } },//sortable:true點(diǎn)擊該列的時(shí)候可以改變升降序 { field: 'addr', title: 'addr', width: 100, editor: {//設(shè)置其為可編輯 type: 'datetimebox',//這里我們將進(jìn)行一個(gè)datetimebox的擴(kuò)展 options: { required: true//設(shè)置編輯規(guī)則屬性 } } } ]],//這里之所以有兩個(gè)方括號(hào),是因?yàn)榭梢宰龀伤?bào)表形式,具體可看demo toolbar: [{//在dategrid表單的頭部添加按鈕 text: "添加", iconCls: "icon-add", handler: function () { if (editFlag != undefined) { $("#dg").datagrid('endEdit', editFlag);//結(jié)束編輯,傳入之前編輯的行 } if (editFlag == undefined) {//防止同時(shí)打開過多添加行 $("#dg").datagrid('insertRow', {//在指定行添加數(shù)據(jù),appendRow是在最后一行添加數(shù)據(jù) index: 0, // 行數(shù)從0開始計(jì)算 row: { code: '', name: '請(qǐng)輸入姓名', addr: '' } }); $("#dg").datagrid('beginEdit', 0);//開啟編輯并傳入要編輯的行 editFlag = 0; } } }, '-', {//'-'就是在兩個(gè)按鈕的中間加一個(gè)豎線分割,看著舒服 text: "刪除", iconCls: "icon-remove", handler: function () { //選中要?jiǎng)h除的行 var rows = $("#dg").datagrid('getSelections'); if (rows.length > 0) {//選中幾行的話觸發(fā)事件 $.message.confirm("提示", "您確定要?jiǎng)h除這些數(shù)據(jù)嗎?", function (res) {//提示是否刪除 if (res) { var codes = {}; for (var i = 0; i < rows.length; i++) { codes.push(rows[i].code); } console.info(codes.join(','));//拼接字符串并傳遞到后臺(tái)處理數(shù)據(jù),循環(huán)刪除,成功后刷新datagrid } }); } } }, '-', { text: "修改", iconCls: "icon-edit", handler: function () { //選中一行進(jìn)行編輯 var rows = $("#dg").datagrid('getSelections'); if (rows.length == 1) {//選中一行的話觸發(fā)事件 if (editFlag != undefined) { $("#dg").datagrid('endEdit', editFlag);//結(jié)束編輯,傳入之前編輯的行 } if (editFlag == undefined) { var index = $("#dg").datagrid('getRowIndex', rows[0]);//獲取選定行的索引 $("#dg").datagrid('beginEdit', index);//開啟編輯并傳入要編輯的行 editFlag = index; } } } }, '-', { text: "保存", iconCls: "icon-save", handler: function () { $("#dg").datagrid('endEdit', editFlag); } }, '-', { text: "撤銷", iconCls: "icon-redo", handler: function () { editFlag = undefined; $("#dg").datagrid('rejectChanges'); } }, '-'], onAfterEdit: function (rowIndex, rowData, changes) {//在添加完畢endEdit,保存時(shí)觸發(fā) console.info(rowData);//在火狐瀏覽器的控制臺(tái)下可看到傳遞到后臺(tái)的數(shù)據(jù),這里我們就可以利用這些數(shù)據(jù)異步到后臺(tái)添加,添加完成后,刷新datagrid editFlag = undefined;//重置 }, onDblClickCell: function (rowIndex, field, value) {//雙擊該行修改內(nèi)容 if (editFlag != undefined) { $("#dg").datagrid('endEdit', editFlag);//結(jié)束編輯,傳入之前編輯的行 } if (editFlag == undefined) { $("#dg").datagrid('beginEdit', rowIndex);//開啟編輯并傳入要編輯的行 editFlag = rowIndex; } } }); }); //點(diǎn)擊查找按鈕出發(fā)事件 function searchFunc() { alert("123"); $("#dg").datagrid("load", sy.serializeObject($("#searchForm").form()));//將searchForm表單內(nèi)的元素序列為對(duì)象傳遞到后臺(tái) //這里介紹reload的使用,使用reload時(shí),會(huì)默認(rèn)記住當(dāng)前頁面,當(dāng)點(diǎn)擊查詢時(shí),如果我們查到的數(shù)據(jù)只有三條,我們每頁顯示10挑數(shù)據(jù),當(dāng)前頁碼是2,那么我們將無法在當(dāng)前頁面看到我們查詢出的結(jié)果,只有將頁面向前跳轉(zhuǎn)才會(huì)看到,但是用load就不會(huì)出現(xiàn)這種情況 } //點(diǎn)擊清空按鈕出發(fā)事件 function clearSearch() { $("#dg").datagrid("load", {});//重新加載數(shù)據(jù),無填寫數(shù)據(jù),向后臺(tái)傳遞值則為空 $("#searchForm").find("input").val("");//找到form表單下的所有input標(biāo)簽并清空 } </script> <div class="easyui-tabs" fit="true" border="false"> <div title="數(shù)據(jù)展示表格" border="false" fit="true"> <div class="easyui-layout" fit="true" border="false"> <!--由于查詢需要輸入條件,但是以toolbar的形式不好,所以我們?cè)贚ayout框架的頭部north中書寫查詢的相關(guān)信息--> <!-- 這里我們盡量使其展示的樣式與toolbar的樣式相似,所以我們先查找toolbar的樣式,并復(fù)制過來--> <div data-options="region:'north',title:'高級(jí)查詢'" style="height: 100px; background: #F4F4F4;"> <form id="searchForm"> <table> <tr> <th>用戶姓名:</th> <td> <input name="name" /></td> </tr> <tr> <th>創(chuàng)建開始時(shí)間</th> <td> <input class="easyui-datetimebox" editable="false" name="subStartTime" /></td> <!--由于datebox框架上面的數(shù)據(jù)必須是時(shí)間格式的,所以我們用editable="false"來禁止用戶手動(dòng)輸入,以免報(bào)錯(cuò)--> <th>創(chuàng)建結(jié)束時(shí)間</th> <td> <input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td> <td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="searchFunc();">查找</a></td> <td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="clearSearch();">清空</a></td> </tr> </table> </form> </div> <div data-options="region:'center',split:false"> <table id="dg"> </table> </div> </div> </div> </div>
擴(kuò)展editor方法:datetimebox
$(function () { /*擴(kuò)展Editors的datetimebox方法*/ $.extend($.fn.datagrid.defaults.editors, { datetimebox: {//為方法取名 init: function (container, options) { var editor = $('<input />').appendTo(container); options.editable = false;//設(shè)置其不能手動(dòng)輸入 editor.datetimebox(options); return editor; }, getValue: function (target) {//取值 return $(target).datetimebox('getValue'); }, setValue: function (target, value) {//設(shè)置值 $(target).datetimebox('setValue', value); }, resize: function (target, width) { $(target).datetimebox('resize', width); }, destroy: function (target) { $(target).datetimebox('destroy');//銷毀生成的panel } } }); });
以上所述是小編給大家介紹的JQuery EasyUI datagrid 添加、修改、刪除操作的全部敘述,希望對(duì)大家有所幫助,如果大家想了解更多內(nèi)容敬請(qǐng)關(guān)注腳本之家網(wǎng)站!
- jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能示例
- jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
- jquery Easyui Datagrid實(shí)現(xiàn)批量操作(編輯,刪除,添加)
- jquery 刪除節(jié)點(diǎn) 添加節(jié)點(diǎn) 找兄弟節(jié)點(diǎn)的簡(jiǎn)單實(shí)現(xiàn)
- jQuery動(dòng)態(tài)添加與刪除tr行實(shí)例代碼
- 使用jquery給指定的table動(dòng)態(tài)添加一行、刪除一行
- jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
- jQuery Tags Input Plugin(添加/刪除標(biāo)簽插件)詳解
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框?qū)嵗a
相關(guān)文章
jQuery實(shí)現(xiàn)頁面滾動(dòng)時(shí)層智能浮動(dòng)定位實(shí)例探討
在博客或者微博上面也會(huì)見到這個(gè)效果,所以客戶就也想要這樣的效果了,接下來為大家詳細(xì)介紹下浮動(dòng)定位實(shí)現(xiàn)的過程,感興趣的朋友可以參考下哈2013-03-03各瀏覽器中querySelector和querySelectorAll的實(shí)現(xiàn)差異分析
querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。不同的是querySelector返回的是一個(gè)對(duì)象,querySelectorAll返回的一個(gè)集合(NodeList)2012-05-05jQuery調(diào)用Webservice傳遞json數(shù)組的方法
這篇文章主要介紹了jQuery調(diào)用Webservice傳遞json數(shù)組的方法,實(shí)例分析了jQuery基于ajax與Webservice傳遞json數(shù)據(jù)的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-08-08基于jquery的網(wǎng)站幻燈片切換效果焦點(diǎn)圖代碼
一款大氣的jQ網(wǎng)站幻燈片切換效果焦點(diǎn)圖代碼,有需要了解習(xí)的朋友可進(jìn)入?yún)⒖?,這款jQuery網(wǎng)站幻燈片切換效果焦點(diǎn)圖非常大氣,要是網(wǎng)站首頁應(yīng)用此款效果,必定是蓬蓽生輝啊2013-09-09深入解析jQuery中Deferred的deferred.promise()方法
這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise() 實(shí)例方法的區(qū)別,需要的朋友可以參考下2016-05-05jquery實(shí)現(xiàn)圖片裁剪思路及實(shí)現(xiàn)
JS,jquery不能實(shí)現(xiàn)圖片的裁剪,只是顯示了一個(gè)假象,在服務(wù)器上用獲得的各個(gè)坐標(biāo)值,以及原始圖片,用JAVA進(jìn)行裁剪2013-08-08jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03