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

最新推荐文章于 2016-11-27 20:14:00 发布

放学后的泡泡

最新推荐文章于 2016-11-27 20:14:00 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/rainyspring4540/article/details/47298351

版权

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

2 需求阐述

效果如下：

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

以下是各种效果图：

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

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

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

后面我把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>
	<!--$.toJSON(params) 方法的使用必须引入,作用：将js对象变成json串，便于存储-->
	<script type="text/javascript" src="../../jquery.json.min.js"></script>
	<!-- jquery使用 $.cookie()操作cookie-->
	<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'},
					<!--原生的html 按钮-->
					{field:'btn',width:100,title:'html按钮',align:'center',formatter:function(value,row,index){
							return "<input type='button' id='btn_demo1_"+index+"' value='创建用户' οnclick='alert();'/>";
							}
					},
					<!-- //jquery EasyUI的 按钮 这个涉及formatter的包含EasyUI控件的情况，涉及EasyUI二次渲染，
						//如果不处理，仅仅显示文本。
						//如果要实现二次渲染控件，大家可以自己百度，我采用的是改EasyUI源码，添加一行代码，在
						//我的源码包里添加有新增地方的注解	
					-->
					{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官网下载，也可以从我最后发的代码包里下载，里面会有：

<!--$.toJSON(params) 方法的使用必须引入,作用：将js对象变成json串，便于存储-->
	<script type="text/javascript" src="../../jquery.json.min.js"></script>
	<!-- jquery使用 $.cookie()操作cookie-->
	<script type="text/javascript" src="../../jquery.cookie.js"></script>
	<!-- 中文设置-->
	<script type="text/javascript" src="../../easyui-lang-zh_CN.js"></script>

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

<script type="text/javascript" src="../../jquery.easyui.min2.js"></script>

我写的是

jquery.easyui.min2.js

而不是

jquery.easyui.min.js

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

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

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

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

放学后的泡泡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery EasyUI 心得--------1.datagrid衍生出的奇葩需求

1
复制链接

扫一扫

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

“相关推荐”对你有帮助么？