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>
相关文章推荐
- Lync 2013 Unauthorized: Access is denied due to a RBAC authorization Failure
- Lync Server 2013 Prerequisite installation failed
- UE4源码分析2-文件目录说明
- String/StringBuffer/StringBuilder详细对比
- STL-unique
- kafka connect到底会不会重写/丢失数据
- IOS UITableView-FDTemplateLayoutCell框架高度返回问题
- LeetCode 374. Guess Number Higher or Lower
- 消除#1366 - Incorrect integer value: '' for column
- LeetCode-Closest Binary Search Tree Value
- Android Studio 的build variants 没有 test artifact问题
- easyUI datagrid自定义添加列 (点击事件)
- Integer不能强制转换为String:toString()、(String)和String.valueOf()的区别
- WinForms UI控件初探:Grid Control 、Data Grid、TreeList
- <s:set>标签中value使用表达式变量的问题
- Leetcode 374. Guess Number Higher or Lower 桌游猜数字 解题报告
- (MyStudy:二)SQLiteDatabase中query、insert、update、delete方法参数说明
- 【奔跑的菜鸟】程序流控制关键字return,break,continue
- LeetCode—374. Guess Number Higher or Lower
- RequireJs入门