jquery EasyUI 心得--------1.datagrid衍生出的奇葩需求

深碍√TFBOYSˉ_ 2022-08-03 11:55 193阅读 0赞

1 环境：http://blog.csdn.net/rainyspring4540/article/details/47297811

2 需求阐述

效果如下：

![Center][]

简述：默认列表显示状态为非编辑状态，右侧放置三种风格的操作按钮，注意：最后一个是2个按钮放在一列。默认列表最后 一行始终要有一行新增行。

以下是各种效果图：

点击“操作”中的笔（编辑），会将操作的图片更换，且默认第一行不能编辑

![Center 1][]

点击保存，会弹出更新后的数据：

![Center 2][]

插入新增数据后，点击保存，弹出新增信息

![Center 3][]

后面我把htm代码 ，附上：

html:

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min2.js"></script>
    	
    	<script type="text/javascript" src="../../jquery.json.min.js"></script>
    	
    	<script type="text/javascript" src="../../jquery.cookie.js"></script>
    	
    	<script type="text/javascript" src="../../easyui-lang-zh_CN.js"></script>
    
    	
    </head>
    <body>
    	<h2>Row Editing in DataGrid</h2>
    	<p>Click the row to start editing.</p>
    	<div style="margin:20px 0;"></div>
    	
    	<table id="demo1" class="easyui-datagrid" title="默认加载编辑状态" style="width:1000px;height:400px"></table><br />
    	<script type="text/javascript">
    		 $("#demo1").datagrid({
    				iconCls: 'icon-edit',
    				singleSelect: true,
    				toolbar: '#tb',
    				url: 'datagrid-editor(defaultEditor).json',
    				method: 'get',
    				toolbar:'#dt_toolbar',
    				columns:[[
    					
    					{field:'itemid',width:80,title:'Item ID',
    						formatter:function(value,row,index){    
    							var htm = '<span>'+value+'</span> ';
    							if(!value){
    								value='';
    							}
    							htm+='<span id="div_demo1_'+index+'" style="display:none;"><input id="key_demo1_'+index+'"   class="easyui-textbox"  value="'+value+'" ></span>';
    							return htm;
    						}
    					},
    					{field:'productid',width:100,title:'Product',
    						formatter:function(value,row){
    							return row.productname;
    						},
    						editor:{
    							type:'combobox',
    							options:{
    								valueField:'productid',
    								textField:'productname',
    								method:'get',
    								url:'products-editor(defaultEditor).json',
    								//required:true,
    								onSelect:function(record){
    									//alert(record);
    								},
    								onChange:function(newValue, oldValue){
    									//alert(oldValue+'--'+newValue);
    								}
    							}
    						}
    					},
    					{field:'listprice',width:80,align:'right',title:'List Price',
    						editor:{
    							type:'numberbox',
    							options:{precision:1},
    							onSelect:function(record){
    									//alert(record);
    							},
    							onChange:function(newValue, oldValue){
    								//alert(oldValue+'--'+newValue);
    							}
    							
    						}
    					},
    					{field:'unitcost',width:80,align:'right',editor:'text',title:'Unit Cost'},
    					{field:'attr1',width:100,editor:'text',title:'Attribute'},
    					{field:'xxx',width:100,align:'center',editor:{type:'datebox'},title:'date'},
    					
    					{field:'btn',width:100,title:'html按钮',align:'center',formatter:function(value,row,index){
    							return "<input type='button' id='btn_demo1_"+index+"' value='创建用户' οnclick='alert();'/>";
    							}
    					},
    					
    					{field:'btn2',width:100,title:'EasyUI按钮',align:'center',formatter:function(value,row,index){
    							return "<div  id='btn2_demo1_"+index+"' ><a class='easyui-linkbutton' οnclick='alert();'>创建用户</a></div>";
    							}
    					},
    					{field:'cz',width:100,align:'center',title:'操作',formatter:function(value,row,index){
    							var btnHtml1="<span><input type='image' src='no.png' οnclick='saveRowByDatagrid(this,5,"+index+")'>  <input type='image' src='pencil.png' οnclick='saveRowByDatagrid(this,0,"+index+")'></span>";
    							var btnHtml2="<span style='display:none;'><input type='image' src='filesave.png' οnclick='saveRowByDatagrid(this,1,"+index+")'>  <input type='image' src='redo.png' οnclick='saveRowByDatagrid(this,2,"+index+")'></span>";
    							var btnHtml3="<span style='display:none;' id='span_id_demo1_"+index+"'><input type='image' src='edit_add.png' οnclick='saveRowByDatagrid(this,3,"+index+")'>  <input type='image' src='reload.png' οnclick='saveRowByDatagrid(this,4)'></span>";
    							return btnHtml1+btnHtml2+btnHtml3;
    							}
    					}
    				]],
    				//行的点击事件
    				//rowIndex代表点击行的index，rowData代表行的数据对象：可以通过 rowData.fieldName取出这一行中具体的某个字段值：如rowData.itemid
    				onClickRow: function(rowIndex,rowData){
                        //主键值数组存入cookie里
                        var pkArr=[];
    					//如果cookie存在事先已经保存位置了就取出来
                        if($.cookie("pkArr_cookie")){
    						//取出cookie值
                            var jsonPK=$.cookie("pkArr_cookie");
    						//将从cookie里的串变成js数组
                            pkArr=$.parseJSON(jsonPK);
                        }
    					//将主键值存在数组里
                        pkArr[rowIndex]=rowData.itemid;
                        $.cookie("pkArr_cookie",$.toJSON(pkArr),{expires:30});
    				},
    				onLoadSuccess:function(data){
    					//追加最后一行
    					$(this).datagrid("appendRow",{});
    					//获取最后一行的index值
    					var tt=$(this).datagrid("getRows");
    					var lastRowIndex = (tt.length-1);
    					//开启最后一行的Editor
    					$(this).datagrid("beginEdit",lastRowIndex);
    					//最后一行的操作图片要换成第三组图片，并将前两组图片隐藏
    					var addIDname="#span_id_demo1_"+lastRowIndex;
    					//涉及jquery技巧了
    					$(addIDname).show();
    					$(addIDname).prevAll().hide();
    					//最后一行的button必须隐藏
    					$('#btn_demo1_'+lastRowIndex).hide();
    					$('#btn2_demo1_'+lastRowIndex).hide();
    					//最后一行隐藏key,显示输入框
    					$('#div_demo1_'+lastRowIndex).prev().hide();
    					$('#div_demo1_'+lastRowIndex).show();
                 }
             });
    	/**
     * 操作datagrid的单行数据
     * @param tableID
     * @param This
     * @param i
     * @param index
     */
    function saveRowByDatagrid(This,i,index){
    	var tableID = "demo1";
    	//获取离this最近的<span>
    	var parentDom=$(This).closest("span");
    	var $table=$("#demo1");
    	if(i==0){//编辑行
    	        //初始化单行的下拉框的editor的url数据，并把默认值填入
    	        initDatagridEditorsData4combo(index);
    			//隐藏第一组图片，第三组默认是隐藏的
    	        parentDom.hide();
    			//显示第二组图片 
    	        parentDom.next().show();
    	}else if(i==1){//保存行
    	    //获取编辑行的值，并拼凑成串
    	    var values=getRowValue4datagrid(index);
    	    var flag=$table.datagrid("validateRow",index);
    			if(flag){
    	           //cookie里取出曾经保存的每行的原始主键值
    	           var pkJson=$.cookie("pkArr_cookie");
    	           //将json串转换成数组
    	           var pkArr=$.parseJSON(pkJson);
    	           //插入数据到db
    	           //......自己写吧
    			   alert(values);
    	        }
    			//刷新
    			$table.datagrid("reload");			
    	}else if(i==2){//取消修改行
    	        $table.datagrid("cancelEdit",index);
    	        var o = $('#btn2_demo1_'+index);
    			//二次渲染，不过不加这一行，则EasyUI按钮那一列就不会渲染出来，仅仅是简单的文本
    	    	$.parser.parse(o);
    	}else if(i==3){//新增行
    	    	var flag=$table.datagrid("validateRow",index);
    	    	if(flag){
    	    		//获取编辑行的值，并拼凑成串
    	    		var values=getRowValue4datagrid(index);
    				alert(values);
    	    		
    	    	} 
    			//刷新
    			$table.datagrid("reload");
    	    }else if(i==4){//刷新
    	        $table.datagrid("reload");
    	    }else{
    	             $.messager.confirm('确认', '您确认想要删除此记录吗？', function(r) {
    	                 if (r) {
    	                   //cookie里取出曾经保存的每行的原始主键值
    	      	           var pkJson=$.cookie("pkArr_cookie");
    	      	           //将json串转换成数组
    	      	           var pkArr=$.parseJSON(pkJson);
    	                     // 找到主表主键
    	                     var keyValue = pkArr[index];
    	                     $.post('xxxx.do', {
    	                         type : 'delete',
    	                         keyValue : keyValue
    	                     }, function(data) {
    	                         $table.datagrid('deleteRow', index);
    							 //刷新
    	                         $table.datagrid("reload");
    	                     });
    	                 }
    	             });
    
    	         
    	    }
    }
    /**点击datagrid的编辑行时，初始化单行editor组件，editor-combobox和combotree需要初始化
     * 其他editor初始化已经满足要求
     * @param ucId
     * @param index
     */
    function initDatagridEditorsData4combo(index){
    	//index :0 1 2 3 4...
    	//cookie里取出曾经保存的每行的原始主键值
        var pkJson=$.cookie("pkArr_cookie");
        //将json串转换成数组
        var keyValue=$.parseJSON(pkJson)[index];
    	//将所在的行的主键值存到uc的隐藏域中
    	$('#demo1').datagrid("beginEdit",index);
    	
    	//要根据不同的控件获取其中的值
    	//combobox
    	var ed = $('#demo1').datagrid( 'getEditor',{index:index,field: 'productid'});
    	$(ed.target).combobox('reload');	
    			
    }
    /**
     * 获取datagrid每一行的editor的值
     * @param index
     * @returns
     */
    function getRowValue4datagrid(index){
    	var arr_rowValue =[];
    	//第一列是formatter格式，不是editor
    	arr_rowValue.push($('#key_demo1_'+index).val());
    	//获取这一行的所有编辑器
    	var editors=$("#demo1").datagrid("getEditors",index);
    	//说明此控件包含editor属性
    	var e0 = editors[0];
    	arr_rowValue.push($(e0.target).combobox('getValue'));
    	var e1 = editors[1];
    	arr_rowValue.push($(e1.target).val());
    	var e2 = editors[2];
    	arr_rowValue.push($(e2.target).val());
    	var e3 = editors[3];
    	arr_rowValue.push($(e3.target).val());
    	var e4 = editors[4];
    	arr_rowValue.push($(e4.target).datebox('getValue'));
    	//将数组,分割开，变成串
    	return arr_rowValue.join();
    }
    /**
     * 根据不同类型的控件，采用不同的取值方式
     * 
     * @param o
     * @returns {String}
     */
    function getValue4EasyUI(id_base,uiType,id_prefix,id_suffix) {
    	
    	var prefix =!id_prefix?'':id_prefix;
    	var suffix =!id_suffix?'':id_suffix;
    	var id = id_base;
    	if(typeof id_base=='string'){
    		id = prefix + id_base+suffix;
    	}else if(typeof id_base=='object'){
    		id = id_base;
    	}
    	
    	//alert(id);
        var ucFieldValue = "";
        //var s = 'a123'.indexOf('a');
        if (uiType&&uiType.indexOf('combobox') >=0 ) {
            ucFieldValue = $(id).combobox('getValue');
        }
        // datebox
        else if (uiType&&uiType.indexOf('datebox')>=0) {
            ucFieldValue = $(id).datebox('getValue');
        }
        //combotree
        else if(uiType&&uiType.indexOf('combotree')>=0){
        	ucFieldValue = $(id).combotree('getValues');
        	ucFieldValue = String(ucFieldValue);
        	//将逗号分隔换成'##-sql-##'
        	ucFieldValue = ucFieldValue.split(',').join(',');
        	//alert(arr_tem);
        }
        
        // 默认的取值方式
        else {
            ucFieldValue = $(id).val();
        }
        ucFieldValue == null ? '' : ucFieldValue;
        // 对要插入orale库的数据过滤掉单引号
        // ucFieldValue = filterStr4DBData(ucFieldValue);
        // alert(ucFieldValue);
        return ucFieldValue;
    }
    	</script>
    </body>
    </html>

json文件：

products-editor(defaultEditor).json（下拉列表的数据）

[
    {"productid":"strawberry","productname":"草莓"},
    {"productid":"apple","productname":"苹果"},
    {"productid":"banana","productname":"香蕉"},
    {"productid":"coconut","productname":"椰子"},
    {"productid":"orange","productname":"橘子"}
    ]

datagrid-editor(defaultEditor).json（datagrid的json数据）

{"total":28,"rows":[
    	{"productid":"apple","productname":"苹果","unitcost":"10.h00","status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1","xxx":"08/08/2015","text":"text1"},
    	{"productid":"banana","productname":"香蕉","unitcost":"12h.00","status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10","xxx":"08/02/2015","text":"text12"},
    	{"productid":"coconut","productname":"椰子","unitcost":"12.h00","status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11","xxx":"08/02/2013","text":"text3"},
    	{"productid":"orange","productname":"橘子","unitcost":"12.00","status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12","xxx":"12/02/2015","text":"text4"},
    	{"productid":"strawberry","productname":"草莓","unitcost":"12.00","status":"F","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13","xxx":"08/22/2015","text":"text5"},
    	{"productid":"orange","productname":"橘子","unitcost":"12.00","status":"F","listprice":158.50,"attr1":"Tailless","itemid":"EST-14","xxx":"08/02/2015","text":"text7"},
    	{"productid":"apple","productname":"苹果","unitcost":"12.00","status":"F","listprice":83.50,"attr1":"With tail","itemid":"EST-15","xxx":"08/02/2000","text":"text8"},
    	{"productid":"apple","productname":"苹果","unitcost":"12.00","status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16","xxx":"","text":""},
    	{"productid":"coconut","productname":"椰子","unitcost":"12.00666","status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17","xxx":"08/02/2014","text":""},
    	{"productid":"coconut","productname":"椰子 Parrot","unitcost":"92.00","status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18","xxx":"08/02/2011","text":"text111"}
    ]}

注意：

1 这里面额外引入了，大家可以自己去jQuery官网下载，也可以从我最后发的代码包里下载，里面会有：

<script type="text/javascript" src="../../jquery.json.min.js"></script>
    	
    	<script type="text/javascript" src="../../jquery.cookie.js"></script>
    	
    	<script type="text/javascript" src="../../easyui-lang-zh_CN.js"></script>

2 这里涉及修改了EasyUI的控件，所以：

我写的是

jquery.easyui.min2.js

而不是

jquery.easyui.min.js

至于修改仅仅是在如下图位置加入如下代码：

![Center 4][]

最后我把完整的代码包传了上去：

http://download.csdn.net/detail/rainyspring4540/8986683

希望未来的自己，能看到自己的成长。。。

[Center]: /images/20220731/1fe62412b4444c94bb8d06f7580ecba2.png
[Center 1]: /images/20220731/e01a9d2478894a64a28a74d3d59988c4.png
[Center 2]: /images/20220731/b5938d1af7e84b5a9712afefba23b485.png
[Center 3]: /images/20220731/9047396abc7042e0b956751f86f41bfa.png
[Center 4]: /images/20220731/3b502a13b1df467abab4b84a9539eb3d.png