表格:右鍵菜單
![]() 參考示例:右鍵菜單 一:創建ContextMenu<ul id="gridMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen"> <li name="add" iconCls="icon-add" onclick="onAdd">新增</li> <li name="edit" iconCls="icon-edit" onclick="onEdit">編輯節點</li> <li name="remove" iconCls="icon-remove" onclick="onRemove">刪除節點</li> </ul> 二:設置表格contextmenu<div id="datagrid1" class="mini-datagrid" contextMenu="#gridMenu"> ...... </div> 三:監聽beforeopen事件監聽右鍵菜單的beforeopen事件,可以對右鍵菜單精確控制。 function onBeforeOpen(e) { var grid = mini.get("datagrid1"); var menu = e.sender; var row = grid.getSelected(); var rowIndex = grid.indexOf(row); if (!row || rowIndex== 0) { e.cancel = true; //阻止瀏覽器默認右鍵菜單 e.htmlEvent.preventDefault(); return; } //////////////////////////////// var editItem = mini.getbyName("edit", menu); var removeItem = mini.getbyName("remove", menu); editItem.show(); removeItem.enable(); if (rowIndex == 1) { editItem.hide(); } if (rowIndex == 1) { removeItem.disable(); } } 四:表頭菜單headerContextMenu創建同樣一個menu菜單對象,設置給表格的headerContextMenu屬性即可。 單元格編輯驗證
![]() 參考示例:單元格編輯驗證 一:設置編輯器驗證規則<div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號 <input property="editor" class="mini-textbox" style="width:100%;" required="true" vtype="email" /> </div>使用編輯器的vtype和onvalidation事件,可以實現編輯器驗證規則。詳細可以查看:數據驗證。 二:監聽處理cellcommitedit事件//提交單元格編輯數據前激發 function onCellCommitEdit(e) { var editor = e.editor; editor.validate(); if (editor.isValid() == false) { alert(editor.getErrorText()); e.cancel = true; } } grid.on("cellcommitedit", onCellCommitEdit); Grid的cellcommitedit事件,在編輯值提交前激發。此時,可以調用編輯器的驗證方法validate,判斷輸入的內容是否符合驗證規則。 CRUD之:彈出面板編輯
![]() 參考示例:CRUD之:彈出面板編輯 一:創建彈出編輯面板<div id="editWindow" class="mini-window" title="Window" style="width:650px;" showModal="true" allowResize="true" allowDrag="true" > <div id="editform" class="form" > <input class="mini-hidden" name="id"/> <table style="width:100%;"> <tr> <td style="width:80px;">員工帳號:</td> <td style="width:150px;"><input name="loginname" class="mini-textbox" /></td> <td style="width:80px;">姓名:</td> <td style="width:150px;"><input name="name" class="mini-textbox" /></td> <td style="width:80px;">薪資:</td> <td style="width:150px;"><input name="salary" class="mini-textbox" /></td> </tr> <tr> <td>性別:</td> <td><input name="gender" class="mini-combobox" url="mini_JSPath + '../../demo/data/genders.txt'"/></td> <td>年齡:</td> <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25" /></td> <td>出生日期:</td> <td><input name="birthday" class="mini-datepicker" /></td> </tr> <tr> <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6"> <a class="Update_Button" href="javascript:updateRow()">Update</a> <a class="Cancel_Button" href="javascript:cancelRow()">Cancel</a> </td> </tr> </table> </div> </div> 二:面板操作彈出加載面板數據: var editWindow = mini.get("editWindow"); editWindow.show(); var form = new mini.Form("#editform"); form.loading(); $.ajax({ url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id, success: function (text) { var o = mini.decode(text); form.setData(o); form.unmask(); }, error: function () { alert("表單加載錯誤"); } });保存提交面板數據: var form = new mini.Form("#editform"); var o = form.getData(); grid.loading("保存中,請稍后......"); var json = mini.encode([o]); $.ajax({ url: "../data/DataService.aspx?method=SaveEmployees", data: { employees: json }, success: function (text) { grid.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); } }); editWindow.hide(); CRUD之:行內表單編輯
![]() 參考示例:CRUD之:行內表單編輯 一:創建編輯表單<div id="editForm1" style="display:none;padding:5px;position:relative;"> <input class="mini-hidden" name="id"/> <table style="width:100%;"> <tr> <td style="width:80px;">員工帳號:</td> <td style="width:150px;"><input name="loginname" class="mini-textbox" /></td> <td style="width:80px;">姓名:</td> <td style="width:150px;"><input name="name" class="mini-textbox" /></td> <td style="width:80px;">薪資:</td> <td style="width:150px;"><input name="salary" class="mini-textbox" /></td> </tr> <tr> <td>性別:</td> <td><input name="gender" class="mini-combobox" data="Genders"/></td> <td>年齡:</td> <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25" /></td> <td>出生日期:</td> <td><input name="birthday" class="mini-datepicker" /></td> </tr> <tr> <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6"> <a class="Update_Button" href="javascript:updateRow();">Update</a> <a class="Cancel_Button" href="javascript:cancelRow();">Cancel</a> </td> </tr> </table> </div> 二:嵌入詳細行//顯示行詳細 grid.hideAllRowDetail(); grid.showRowDetail(row); //將editForm元素,加入行詳細單元格內 var td = grid.getRowDetailCellEl(row); td.appendChild(editForm); editForm.style.display = ""; 三:加載表單var form = new mini.Form("editForm1"); if (grid.isNewRow(row)) { form.reset(); } else { form.loading(); $.ajax({ url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id, success: function (text) { var o = mini.decode(text); form.setData(o); form.unmask(); } }); } 四:提交表單var form = new mini.Form("editForm1"); var o = form.getData(); grid.loading("保存中,請稍后......"); var json = mini.encode([o]); $.ajax({ url: "../data/DataService.aspx?method=SaveEmployees", data: { employees: json }, success: function (text) { grid.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); } }); CRUD之:行編輯
![]() 參考示例:CRUD之:行編輯 一:創建單元格編輯器<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" url="../data/DataService.aspx?method=SearchEmployees" > <div property="columns"> <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div> <div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號 <input property="editor" class="mini-textbox" /> </div> <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性別 <input property="editor" class="mini-combobox" style="width:100%;" data="[{id:1,text:'男'}, {id:2, text: '女'}]"/> </div> <div field="age" width="100" allowSort="true">年齡 <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/> </div> <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期 <input property="editor" class="mini-datepicker" style="width:100%;"/> </div> <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">創建日期</div> </div> </div> 比如:mini-textbox的property為"editor",表示是此列的編輯器。 二:編輯操作開始編輯行:grid.beginEditRow(row);取消編輯: grid.cancelEdit(); 提交編輯數據: var rowData = grid.getEditRowData(row); grid.loading("保存中,請稍后......"); var json = mini.encode([rowData]); $.ajax({ url: "../data/DataService.aspx?method=SaveEmployees", data: { employees: json }, success: function (text) { grid.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); } }); CRUD之:單元格編輯
![]() 參考示例:單元格編輯 一:創建單元格編輯器<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" url="../data/AjaxService.aspx?method=SearchEmployees" idField="id" allowResize="true" pageSize="20" allowCellEdit="true" allowCellSelect="true" multiSelect="true"> <div property="columns"> <div type="checkcolumn"></div> <div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號 <input property="editor" class="mini-textbox" style="width:100%;"/> </div> <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性別 <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/> </div> <div field="age" width="100" allowSort="true" >年齡 <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/> </div> <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期 <input property="editor" class="mini-datepicker" style="width:100%;"/> </div> <div field="remarks" width="120" headerAlign="center" allowSort="true">備注 <input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/> </div> <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">創建日期</div> </div> </div> 設置allowCellEdit和allowCellSelect后,表格為單元格編輯模式。 二:編輯操作增加行: function addRow() { var newRow = { name: "New Row" }; grid.addRow(newRow, 0); }刪除行: function removeRow() { var rows = grid.getSelecteds(); if (rows.length > 0) { grid.removeRows(rows, true); } }保存數據: function saveData() { //獲得增加、刪除、修改的記錄集合 var data = grid.getChanges(); var json = mini.encode(data); grid.loading("保存中,請稍后......"); $.ajax({ url: "../data/AjaxService.aspx?method=SaveChangedEmployees", data: { data: json }, type: "post", success: function (text) { grid.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); } }); } 三:服務端處理public void SaveChangedEmployees() { String json = Request["data"]; ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json); foreach (Hashtable row in rows) { //根據記錄狀態,進行不同的增加、刪除、修改操作 String state = row["_state"] != null ? row["_state"].ToString() : ""; if(state == "added") { row["createtime"] = DateTime.Now; new TestDB().InsertEmployee(row); } else if (state == "removed" || state == "deleted") { String id = row["id"].ToString(); new TestDB().DeleteEmployee(id); } else if (state == "modified") { new TestDB().UpdateEmployee(row); } } } 詳細行
![]() 參考示例:詳細行 表格的"showRowDetail"方法可以為一個普通表格行增加了一個詳細行。 通過"getRowDetailCellEl"方法獲得此詳細行的DOM元素后,可以在此詳細行DOM元素內加入任何HTML內容。 function onShowRowDetail(e) { var grid = e.sender; var row = e.record; var td = grid.getRowDetailCellEl(row); $.ajax({ url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id, success: function (text) { var o = mini.decode(text); //生成詳細信息html if (o.gender == 1) o.gender_name = "男"; else if (o.gender == 2) o.gender_name = "女"; else o.gender_name = ""; o.birtyday_name = o.birthday ? mini.formatDate(o.birthday, "yyyy-MM-dd") : ""; td.innerHTML = ""; $("#formTemplate").tmpl(o).appendTo(td); ; } }); } 表格:匯總行
![]() 參考示例:匯總行 Javascript處理通常在表格的"load"數據加載完成事件中,更新表格的匯總信息: grid.on("load", onGridLoad); function onGridLoad(e) { var result = e.result; var grid = e.sender; var cellEl = grid.getSummaryCellEl("ageColumn"); cellEl.style.cssText = "text-align:right"; cellEl.innerHTML = "<span style='color:Brown;'>" + 'Min=' + result.minAge + "<br/>" + 'Max=' + result.maxAge + "<br/>" + 'Avg=' + result.avgAge + "<br/>" + "</span>"; var cellEl = grid.getSummaryCellEl("totalColumn"); cellEl.innerHTML = "總員工數:" + result.total; } 服務端數據處理在服務端返回表格分頁數據時,我們額外增加了一些屬性,比如minAge、maxAge、avgAge等,代碼如下: public Hashtable SearchEmployees(string key, int index, int size, string sortField, string sortOrder) { ArrayList employees = ......; //分頁后的數據 int totalCount = ......; //總記錄數 Hashtable result = new Hashtable(); result["data"] = employees; result["total"] = totalCount; //生成一些匯總信息 ArrayList ages = DBUtil.Select("select min(age) as minAge, max(age) as maxAge, avg(age) as avgAge from t_employee"); Hashtable ageInfo = ages[0] as Hashtable; result["minAge"] = ageInfo["minAge"]; result["maxAge"] = ageInfo["maxAge"]; result["avgAge"] = ageInfo["avgAge"]; return result; } 表格:過濾行
![]() 參考示例:行過濾 一:定義過濾器設置表格"showFilter"屬性為"true"后,可以在列配置對象上定義過濾器對象: <div field="name" width="120" headerAlign="center" allowSort="true">姓名 <!--定義此列的過濾器對象,注意property="filter"--> <input id="nameFilter" property="filter" class="mini-textbox" onvaluechanged="onNameFilterChanged" style="width:100%;" /> </div> 二:處理"valuechanged"事件在"onvaluechanged"值變化時,會自動調用一個過濾方法onNameFilterChanged。此方法由開發者實現,如下: function onNameFilterChanged(e) { var textbox = e.sender; var key = textbox.getValue(); grid.load({ key: key }); } |