easyui 雙擊行，啟動編輯 ，及 儲存 和 撤銷 的實現。
阿新 • • 發佈：2019-02-18
當前程式碼實現在webgate 專案中，
webgate 專案地址：https://github.com/Wenhaoran/webgateDataGrid 中，使用的 事件，方法，均可檢視 easyui API
1、在所有需要啟動編輯的列，加上 editor，可檢視 API 中，列屬性：editor 。其中，當 editor 的 type 是：combox時，需要自己定義資料，或者資料來源。 2、初始化 操作 欄 按鈕。在 <a> 中，增加自定義 屬性。 屬性名稱：data-row ，屬性值：自定義+行號（自定義屬性，是為了方便更改每行 的 按鈕樣式，控制按鈕顯示）3、在初始化表格資料 dataGrid中 ，定義 雙擊 啟動編輯事件 ，onDblClickRow .並在此方法中， 顯示當前行的 儲存，和 撤銷 按鈕。
4、實現 儲存，和 撤銷更改 的方法。
//儲存的程式碼
$('#dataGrid').datagrid('endEdit', rowIndex); // endEdit 為 結束編輯行 方法，引數 為 行號。
var arr=$('#dataGrid').datagrid('getData');// 獲取所有行資料的方法
var name=arr.rows[rowIndex].name; // 當前行的 name 屬性值，name ，是由 渲染資料 的 dataGrid 方法中，欄位 的 field 來決定。
//撤銷的程式碼
$('#dataGrid').datagrid('cancelEdit', rowIndex); // cancelEdit ，引數：行號， 方法是：撤銷當前行的更改。
其中，有一個地方有問題。
就是，編輯 combox 之後，列表顯示的資料消失了。
其實，編輯完成後，combox 的值，為 value ，不是text ，但是不知道為啥，不能匹配。
所以，在這裡，我 增加了兩段程式碼，來更新 combox 的值。
1、在 載入 系統 狀態中
formatter : function(value, row, index) {
if(value==1||value==2||value==3){
switch (value) {
case 1:
return '在用';
case 2:
return '停用';
case 3:
return '廢用';
}
}else{
return value;
}
}
讓他判斷，如果 value 是數字，走 switch ，如果不是，直接返回。
2、在儲存 的程式碼方法中。
var statusName = '';
if(status==1){
statusName ='在用';
}else if(status == 2){
statusName ='停用';
}else if(status == 3){
statusName ='廢用';
}
$('#dataGrid').datagrid('updateRow',{
index: rowIndex,
row: {
status: statusName
}
});
獲取更改後的 status 值，並進行判斷 ，然後 呼叫 updateRow 方法，來更新這個資料。
全部程式碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<%@ include file="/commons/basejs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${staticPath}/static/style/css/search.css"/>
<meta http-equiv="X-UA-Compatible" content="edge" />
<title>系統資訊管理</title>
<script type="text/javascript">
var currency_Button_Mod = '';
var dataGrid;
$(function() {
dataGrid = $('#dataGrid').datagrid({
url : '${path}/pages/system/dataGrid',
striped : true,
rownumbers : true,
pagination : true,
singleSelect : true,
idField : 'id',
sortName : 'inserttime',//id
sortOrder : 'desc',
fit : true,
fitColumns : true,
fix : false,
autoRowHeight : false,
//onClickCell:function(){}
onDblClickRow: function(index,field,value){
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', {index:index,field:field});
$("a[data-row='edit_"+index+"']").attr("hidden",true);
$("a[data-row='revoke_"+index+"']").removeAttr("hidden");
$("a[data-row='save_"+index+"']").removeAttr("hidden");
$("a[data-row='save_"+index+"']").linkbutton({text:'儲存',plain:true,iconCls:'icon-save'});
$("a[data-row='revoke_"+index+"']").linkbutton({text:'撤銷更改',plain:true,iconCls:'icon-clear'});
},
pageSize : 20,
pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
columns: [[
{
width : '10%',
title : '主鍵',
field : 'id',
sortable : true,
align : 'center',
hidden : true
} ,
{
width : '20%',
title : '系統編號',
field : 'code',
sortable : false,
align : 'center',
hidden : false,
editor:'text'
} ,
{
width : '20%',
title : '系統名稱',
field : 'name',
sortable : false,
align : 'center',
hidden : false,
editor:'text'
} ,
{
width : '20%',
title : '系統狀態',
field : 'status',
sortable : false,
align : 'center',
hidden : false,
editor:{
type: 'combobox',
options: {
data: [{"value":"1","text":"在用"},{"value":"2","text":"停用"},{"value":"3","text":"廢用"}],
valueField: "value",
textField: "text",
editable: false,
panelHeight:70,
required: true
}
},
formatter : function(value, row, index) {
if(value==1||value==2||value==3){
switch (value) {
case 1:
return '在用';
case 2:
return '停用';
case 3:
return '廢用';
}
}else{
return value;
}
}
} ,
{
field : 'action',
title : '操作',
width : 200,
align : 'center',
formatter : function(value, row, index) {
var str = '';
if(row.code !='webgate'){
//str += $.formatString('<a href="javascript:void(0)" class="texpjourPurchInvoiceDet-easyui-linkbutton-editfun" data-options="plain:true,iconCls:\'icon-edit\'" onclick="editFun(\'{0}\');" >更改系統狀態</a>', row.id);
str += $.formatString('<a hidden href="javascript:void(0)" class="texpjourPurchInvoiceDet-easyui-linkbutton-edit" data-row="edit_{0}" data-options="plain:true,iconCls:\'icon-edit\'" >更改</a>', index );
}
str += $.formatString('<a hidden href="javascript:void(0)" class="texpjourPurchInvoiceDet-easyui-linkbutton-revoke" data-row="save_{0}" data-options="plain:true,iconCls:\'icon-edit\'" onclick="saveRow(\'{1}\',\'{2}\');" >儲存</a>', index, row.id, index);
str += $.formatString('<a hidden href="javascript:void(0)" class="texpjourPurchInvoiceDet-easyui-linkbutton-revoke" data-row="revoke_{0}" data-options="plain:true,iconCls:\'icon-edit\'" onclick="revoke(\'{1}\',\'{2}\');" >撤銷更改</a>', index, row.id, index);
return str;
}
}
]],
onLoadSuccess:function(data){
//$('.texpjourPurchInvoiceDet-easyui-linkbutton-editfun').linkbutton({text:'更改系統狀態',plain:true,iconCls:'icon-edit'});
$('.texpjourPurchInvoiceDet-easyui-linkbutton-edit').linkbutton({text:'雙擊行資料更改',plain:true,iconCls:'icon-edit'});
},
toolbar : '#toolbar'
});
});
function addFun() {
var url="${path}/pages/system/addPage";
openEditDialog(url, 200, 300, dataGrid, function(cid) {
add(cid);
}).dialog('open').dialog('setTitle', '新增');
}
function revoke(id,rowIndex) {
$('#dataGrid').datagrid('cancelEdit', rowIndex);
$("a[data-row='edit_"+rowIndex+"']").linkbutton({text:'雙擊行資料更改',plain:true,iconCls:'icon-edit'});
}
function saveRow(id,rowIndex){
var oArr=$('#dataGrid').datagrid('getData');
var oStatus=oArr.rows[rowIndex].status;
$('#dataGrid').datagrid('endEdit', rowIndex);
var arr=$('#dataGrid').datagrid('getData');
var id = arr.rows[rowIndex].id;
var code=arr.rows[rowIndex].code;
var name=arr.rows[rowIndex].name;
var status=arr.rows[rowIndex].status;
var statusName = '';
if(status==1){
statusName ='在用';
}else if(status == 2){
statusName ='停用';
}else if(status == 3){
statusName ='廢用';
}
$('#dataGrid').datagrid('updateRow',{
index: rowIndex,
row: {
status: statusName
}
});
if(oStatus==1&&status!=1){
$.messager.confirm('詢問', '當前系統可能關聯其他 角色、資源、元件 等資訊，停用後會導致被關聯的資訊均被停用，是否繼續？', function(b) {
if (b) {
var url ='${path}/pages/system/edit';
/* $.ajax({
url : url,
type: "POST",
async: false,
data:{'id':id,'code':code,'name':name,'status':status},
dataType: "json",
cache: false,
success : function(result) {
if (result.success) {
console.log(result);
} else {
easyui_error(result.msg);
}
}
}); */
}
});
}else{
var url ='${path}/pages/system/edit';
/* $.ajax({
url : url,
type: "POST",
async: false,
data:{'id':id,'code':code,'name':name,'status':status},
dataType: "json",
cache: false,
success : function(result) {
if (result.success) {
console.log(result);
} else {
easyui_error(result.msg);
}
}
}); */
}
$("a[data-row='edit_"+rowIndex+"']").linkbutton({text:'雙擊行資料更改',plain:true,iconCls:'icon-edit'});
}
function editFun(id) {
if (id == undefined) {
var rows = dataGrid.datagrid('getSelections');
id = rows[0].id;
} else {
dataGrid.datagrid('unselectAll').datagrid('uncheckAll');
}
var url="${path}/pages/system/editPage?id=" + id;
openEditDialog(url, 200, 300, dataGrid, function(cid) {
modify(cid);
}).dialog('open').dialog('setTitle', '更改系統狀態');
}
function searchFun() {
dataGrid.datagrid('load', $.serializeObject($('#searchForm')));
}
function cleanFun() {
$('#searchForm input').val('');
$('#searchForm select').combobox({
onLoadSuccess: function (row, data) {
$(this).combobox('setValue', '');
}
});
dataGrid.datagrid('load', {});
}
</script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:true">
<div data-options="region:'north',border:false,title:'查詢條件'" style="height:70px; overflow: hidden;background-color: #fff">
<form id="searchForm">
<div class="search_condition">
<p>
<b>系統編碼：</b>
<input id="code_query" name="code" type="text" placeholder="請輸入系統編碼" class="easyui-validatebox span2" maxlength="32" value=""/>
</p>
<p>
<b>系統名稱：</b>
<input id="name_query" name="name" type="text" placeholder="請輸入系統名稱" class="easyui-validatebox span2" maxlength="50" value=""/>
</p>
<p>
<b>系統狀態：</b>
<select id="status_query" name="status" class="easyui-combobox" data-options="width:120,height:26,editable:false,panelHeight:'140px'">
<option value="">-請選擇-</option>
<option value="3">廢用</option>
<option value="2">停用</option>
<option value="1">在用</option>
</select>
</p>
<p class="btnSear">
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">查詢</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true" onclick="cleanFun();">清空</a>
</p>
</div>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="dataGrid" data-options="fit:true,border:false"></table>
</div>
</div>
<div id="toolbar" style="display: none;">
<ingenta-tag:BtnTag limit="${form.limit}" code="test" iconStyle="icon-edit bigger-120" buttonStyle="btn btn-mini btn-warning" scopeName="functionMap" lang="lang" name="測試按鈕" />
<a onclick="addFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">新增</a>
</div>
</body>
</html>