`
我是温浩然
  • 浏览: 104133 次
文章分类
社区版块
存档分类
最新评论

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、在保存 的代码方法中。

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>


分享到：
| webgate 重构项目总结 2
评论
发表评论

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

相关推荐

    easyUI行编辑comobox多选显示

    easyUI行编辑comobox 下拉多选显示

    easyui datagrid 行编辑中combogrid和combobox显示问题

    修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时，输入框显示图标按钮，实现对应的事件。 3、解决类型为combobox显示为value而...

    easyui datagrid在编辑状态下更新列的值

    最后，对于“easyui-datagrid-editor”这个压缩包文件，它可能包含了示例代码、样式文件或其他资源，帮助开发者理解并实现编辑状态下Datagrid列值的更新功能。如果需要进一步的帮助，可以查看该文件的内容或查阅...

    EasyUI 创建展开行明细编辑表单的 CRUD 应用

    在这个“EasyUI 创建展开行明细编辑表单的 CRUD 应用”中，我们将深入探讨如何利用 EasyUI 实现数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete）操作，并且在表格中展开行来显示和编辑明细信息...

    EasyUI分页，编辑

    - `onDblClickRow`：双击行时触发的事件，可以在这个事件中启动编辑。 - `onBeforeEdit`：开始编辑前的回调，用于预处理或验证。 - `onAfterEdit`：编辑完成后触发，用于保存或提交更改。 #### 2.3 弹出窗口编辑 - ...

    easyUI行内可编辑

    4. **事件处理**：在行内编辑中，我们需要监听 `onDblClickRow` 事件，当用户双击某行时，触发编辑模式。此外，还需要处理 `onClickCell` 事件，以便在单击单元格时也能启动编辑。 ```javascript $('#table')....

    easyUI拓展：获取当前datagrid正在编辑状态的行编号

    easyUI拓展：获取当前datagrid中在编辑状态的行编号列表，直接使用即可

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中，DataGrid是一种常用的表格展示控件，它可以与各种编辑器结合使用，如combobox（下拉框）来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    EasyUI可扩展Editable DataGrid（可编辑数据表格）

    例如，使用`onClickRow`或`onDblClickRow`事件处理函数来控制何时启动编辑，或者使用`saveRow`和`cancelRow`方法来处理用户保存或取消编辑的操作。同时，为了验证用户输入的数据，可以结合使用`onBeforeEdit`和`...

    easyui DataGrid动态编辑

    在本文中，我们将深入探讨EasyUI的DataGrid组件如何实现动态编辑功能。EasyUI是一个基于jQuery的前端框架，它提供了一系列轻量级、易于使用的UI组件，DataGrid就是其中之一，常用于展示和管理表格数据。 DataGrid是...

    easyui-datagrid可编辑可过滤的DEMO

    在EasyUI 1.5版本中，DataGrid的编辑功能通常包括单元格编辑、行编辑和弹出式编辑三种模式，可以根据实际需求选择合适的方式。 1. 单元格编辑：用户点击某个单元格时，该单元格变为可编辑状态，编辑完成后保存更改...

    easyui行编辑实例（仅前台Html代码，无后台代码）

    3. 行编辑模式：在EasyUI中，可以设置datagrid为行编辑模式，通过添加`editable`属性和相关的编辑器配置实现。在本实例中，用户可以通过点击某行的编辑按钮来激活编辑状态，对数据进行修改。 4. HTML代码：这个实例...

    EasyUI 行拖动效果

    EasyUI 是一个基于 jQuery 的前端框架，用于快速开发用户界面，尤其在数据展示和操作方面提供了丰富的组件。在 EasyUI 中，DataGrid 是一个常用的表格控件，它能够方便地展示和管理数据。"行拖动效果"是DataGrid的一...

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid实现实现上下左右和回车切换单元格

    根据提供的文件信息，本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合，它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...

    easyui datagrid editor combogrid和combobox

    easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时，输入框显示图标按钮，实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。

    用Avalonia实现的EasyUI控件

    用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！

    easyUI datagrid 行上移，下移，置顶，置底的方法

    easyUI datagrid 行上移，下移，置顶，置底的方法

    easyui的datagrid生成合并行,合计计算价格

    综上所述，利用EasyUI的DataGrid组件，我们可以方便地实现数据的行合并和总价计算，从而创建出功能完善的表格展示。理解并熟练运用这些功能，能够提升Web应用的用户体验，使数据展示更加清晰、直观。

Magicbox
Global site tag (gtag.js) - Google Analytics