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