您的位置:首页 > 产品设计 > UI/UE

easy ui 行内编辑数据并保存

2016-07-13 16:22 351 查看
<script>

var editIndex = undefined;
var edit_flag = false;

$(function(){
var data;
var t;

data=[[
{field:'st_id',title: '任务ID',align: 'center' ,width: '7%' },
{field:'sm_name',title: '名称',align: 'center',width: '9%'},
{field:'st_start_date',title: '开始日期*',align: 'center',width: '8.3%', editor:{type:'datebox',options:{required:true,formatter:myformatter,parser:myparser1}}},
{field:'st_end_date',title: '结束日期*',align: 'center', width: '8.3%'  , editor:{type:'datebox',options:{required:true,formatter:myformatter,parser:myparser1}}},
{field:'st_condition',title: '定时条件*',align: 'center',width: '8.3%',editor:'textbox'},
{field:'st_url',title: '指定URL*',align: 'center',width: '9%',editor:'textbox'},
{field:'st_spath',title: '结果文件路径*',align: 'center',width: '10%',editor:'textbox'},
{field:'st_sfile',title: '结果文件名*',align: 'center',width: '8.3%',editor:'textbox'},
{field:'st_desc',title: '描述*',align: 'center',width: '11%',editor:'textbox'},
{field:'st_valid_str',title: '标记*',align: 'center',width: '7%' ,
formatter:function(value,row){
return row.st_valid_str;
},
editor:{
type:'combobox',
options:{
valueField:'sm_valid',
textField:'sm_valid',
method:'get',
url:'sm_valid.json',
panelHeight:48,
required:true
}
}
},
{field:'handle',title: '操作',align: 'center',width: '7%' ,

formatter:function(value,row,index){
var st_id=row.st_id;

if (row.editing){
var s = '<a id="a_s_'+st_id+'" href="#" style="color:red;" onclick="saverow(this)">保存</a> ';
var c = '<a href="#" style="color:red;" onclick="cancelrow(this)">取消</a>';
return s+c;
} else {
v
4000
ar e = '<a href="#" onclick="editrow(this)">修改</a> ';
var d = '<a href="#" onclick="remo('+st_id+')">删除</a>';
return e+d;
}
}
}

]];

$('#cfgTable').datagrid({
striped: true,
url:'<%=request.getContextPath()%>/***/***',
//queryParams : {text:encodeURI('1'),usetype:encodeURI('2'),rela:'3',citys:encodeURI('4')},
loadMsg:'数据加载中请稍后……',
pagination: true,
rownumbers: true,
checkOnSelect: false,
onDblClickCell:onDblClickCell,
onBeforeEdit:function(index,row){
row.editing = true;
updateActions(index);
},
onAfterEdit:function(index,row){
row.editing = false;

if(edit_flag == false){
openEdit(row.st_id,
row.st_start_date,
row.st_end_date,
row.st_condition,
row.st_url,
row.st_spath,
row.st_sfile,
row.st_desc,
row.st_valid_str);
}

updateActions(index);
},
onCancelEdit:function(index,row){
row.editing = false;
updateActions(index);
},
singleSelect: true,
pageSize:15,
pageList: [10,15,20],
columns:data,
toolbar: [{
text: '新增',
iconCls: 'icon-add',
handler: function() {
openDialog();
}
}]

});

var p = $('#cfgTable').datagrid('getPager');

$(p).pagination({
//pageSize: 15,//每页显示的记录条数,默认为10
pageList: [10,15,20],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页    共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录     共 {total} 条记录'
});

});

//更新行数据
function updateActions(index){
$('#cfgTable').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){
var editrow = getRowIndex(target);
edit_flag = false;

if(editIndex != undefined){
$('#cfgTable').datagrid('cancelEdit', editIndex);
editIndex = undefined;
}

$('#cfgTable').datagrid('beginEdit', editrow);
editIndex=editrow;

}
//保存操作
function saverow(target){
edit_flag = false;
var editrow = getRowIndex(target);
$('#cfgTable').datagrid('endEdit', editrow);
editIndex = undefined;

}
//取消操作
function cancelrow(target){
$('#cfgTable').datagrid('cancelEdit', getRowIndex(target));
editIndex = undefined;
}

function openDialog(){
。。。。
}

function openEdit(st_id,st_start_date, st_end_date, st_condition, st_url, st_spath, st_sfile, st_desc,st_valid){
。。。。。

}

//日历时间格式函数
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+''+(m<10?('0'+m):m)+''+(d<10?('0'+d):d);
}
function myparser(s){

}
//将日历原先的值显示子日历表中
function myparser1(s){

if (s != null && s != ''){
return new Date(s.substring(0,4),s.substring(4,6)-1,s.substring(6));
} else {
return new Date();
}
}

function endEditing(){

if (editIndex == undefined){return true;};

if ($('#cfgTable').datagrid('validateRow', editIndex)){

$('#cfgTable').datagrid('cancelEdit', editIndex);

editIndex = undefined;
return true;
} else {
return false;
}
}

//index为点击第几行 , field为点击的字段
function onDblClickCell(index, field){
//不是需要修改的字段 不执行
if(field !='st_start_date'&&field!='st_end_date'){
//取消行编辑状态
$('#cfgTable').datagrid('endEdit', editIndex);
editIndex = undefined;
return;
}

if (editIndex != index){
if (endEditing()){

//edit_flag为true不保存   false保存数据
edit_flag = true;

//选中一行,行索引从 0 开始。
$('#cfgTable').datagrid('selectRow', index).datagrid('beginEdit', index);

//获取指定的编辑器, options 参数包含两个特性:  index:行的索引; field:字段名。
var ed = $('#cfgTable').datagrid('getEditor', {index:index,field:field});
if (ed){
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}

editIndex = index;
} else {
setTimeout(function(){
$('#cfgTable').datagrid('selectRow', editIndex);
},0);
}
}
}

</script>
<body>
    <div class="main " >
     <table id="cfgTable" data-options="fit:true,toolbar:'#toolbar',panelHeight:'auto'"></table>
    </div>
</body>



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: