easyui 双击行，启动编辑，及保存和撤销的实现。 -

我是温浩然

浏览: 95979 次

最近访客更多访客>>

jh108020

tsdyy

NOthingAj

是飒飒

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (273)

社区版块

存档分类

easyui 双击行，启动编辑，及保存和撤销的实现。

当前代码实现在webgate 项目中，

webgate 项目地址：https://github.com/Wenhaoran/webgate

DataGrid 中，使用的事件，方法，均可查看 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、在保存的代码方法中。

获取更改后的 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>

分享到：

quartz初步认识。 | webgate 重构项目总结 2

2017-04-17 14:02
浏览 609
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyui 双击行，启动编辑，及保存和撤销的实现。

当前代码实现在webgate 项目中，

DataGrid 中，使用的事件，方法，均可查看 easyui API

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyui 双击行，启动编辑 ，及 保存 和 撤销 的实现。

当前代码实现在webgate 项目中，

DataGrid 中，使用的 事件，方法，均可查看 easyui API

评论

发表评论

相关推荐

最近访客更多访客>>

easyui 双击行，启动编辑，及保存和撤销的实现。

DataGrid 中，使用的事件，方法，均可查看 easyui API