• jquery eazyUI 关于datagrid编辑实现


    $(function(){
    		$('#tt').datagrid({
    			title:'Editable DataGrid',
    			iconCls:'icon-edit',
    			660,
    			height:250,
    			singleSelect:true,
    			idField:'itemid',
    			url:'datagrid_data.json',
    			columns:[[
    				{field:'itemid',title:'Item ID',60},
    				{field:'productid',title:'Product',100,
    					formatter:function(value){
    						for(var i=0; i<products.length; i++){
    							if (products[i].productid == value) return products[i].name;
    						}
    						return value;
    					},
    					editor:{
    						type:'combobox',
    						options:{
    							valueField:'productid',
    							textField:'name',
    							data:products,
    							required:true
    						}
    					}
    				},
    				{field:'listprice',title:'List Price',80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
    				{field:'unitcost',title:'Unit Cost',80,align:'right',editor:'numberbox'},
    				{field:'attr1',title:'Attribute',150,editor:'text'},
    				{field:'status',title:'Status',50,align:'center',
    					editor:{
    						type:'checkbox',
    						options:{
    							on: 'P',
    							off: ''
    						}
    					}
    				},
    				{field:'action',title:'Action',70,align:'center',
    					formatter:function(value,row,index){
    						if (row.editing){
    							var s = '<a href="#" onclick="saverow(this)">Save</a> ';
    							var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
    							return s+c;
    						} else {
    							var e = '<span onclick="editrow(this)">Edit</span> ';
    							var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
    							return e+d;
    						}
    					}
    				}
    			]],
    			onBeforeEdit:function(index,row){
    				row.editing = true;
    				updateActions(index);
    			},
    			onAfterEdit:function(index,row){
    				row.editing = false;
    				updateActions(index);
    			},
    			onCancelEdit:function(index,row){
    				row.editing = false;
    				updateActions(index);
    			}
    		});
    	});
    	function updateActions(index){
    		$('#tt').datagrid('updateRow',{
    			index: index,
    			row:{}
    		});
    	}
    function getRowIndex(target){
    		var tr = $(target).closest('tr.datagrid-row');
    		return parseInt(tr.attr('datagrid-row-index'));
    	}
    	function editrow(target){
    		$('#tt').datagrid('beginEdit', getRowIndex(target));//实际可编辑效果在这里....
    	}
    	function deleterow(target){
    		$.messager.confirm('Confirm','Are you sure?',function(r){
    			if (r){
    				$('#tt').datagrid('deleteRow', getRowIndex(target));
    			}
    		});
    	}
    	function saverow(target){
    		$('#tt').datagrid('endEdit', getRowIndex(target));//关闭编辑
    	}
    	function cancelrow(target){
    		$('#tt').datagrid('cancelEdit', getRowIndex(target));
    	}
    参考官网:https://www.jeasyui.net/tutorial/36.html 虽然官网也有,但是加载有时候有点慢,我就照搬过来了。

      

  • 相关阅读:
    CentOS 6.6 下源码编译安装MySQL 5.7.5
    CentOS 6.6下安装配置Tomcat环境
    Redhat6.7 切换Centos yum源
    css盒模型
    mysql 查询表占用空间大小
    ligerform 控件元素设置为只读
    FtpClient中文文件名下载失败问题
    java Runtime.exec() 执行问题
    java log4j动态生成log文件
    java udp地址匹配
  • 原文地址:https://www.cnblogs.com/zf-crazy/p/14246323.html
Copyright © 2020-2023  润新知