jquery EasyUI 心得--------1.datagrid衍生出的奇葩需求
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='创建用户' onclick='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' onclick='alert();'>创建用户</a></div>";
}
},
{field:'cz',width:100,align:'center',title:'操作',formatter:function(value,row,index){
var btnHtml1="<span><input type='image' src='no.png' onclick='saveRowByDatagrid(this,5,"+index+")'> <input type='image' src='pencil.png' onclick='saveRowByDatagrid(this,0,"+index+")'></span>";
var btnHtml2="<span style='display:none;'><input type='image' src='filesave.png' onclick='saveRowByDatagrid(this,1,"+index+")'> <input type='image' src='redo.png' onclick='saveRowByDatagrid(this,2,"+index+")'></span>";
var btnHtml3="<span style='display:none;' id='span_id_demo1_"+index+"'><input type='image' src='edit_add.png' onclick='saveRowByDatagrid(this,3,"+index+")'> <input type='image' src='reload.png' onclick='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
希望未来的自己，能看到自己的成长。。。