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

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 应用...

    用Avalonia实现的EasyUI控件

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

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

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

    easyui datagrid editor combogrid和combobox

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

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

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

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

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

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