esayui 编辑单元格 双击编辑一个单元格,不是一行,单击其他后,关闭编辑状态,单击双击编辑可以任意调整

来源:互联网 发布:it便利店 编辑:程序博客网 时间:2024/05/20 08:41


下面是datagriad的html,主要的地方是:editor="text" 这个属性一定要配置,不然不能生效,不一定是text,可以使用的类型有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。

用到的事件有:

onDblClickCell:DbclkCommentCell,
onAfterEdit:onAfterEdit,
onClickCell:singleClink"

        <table id="news_table" class="easyui-datagrid"data-options="fit:true,url:'',border:0,title:'标题',rownumbers:true,toolbar:'#toolsONE',singleSelect:true,onDblClickCell:DbclkCommentCell,onAfterEdit:onAfterEdit,onClickCell:singleClink"><thead><tr><thdata-options="field:'name',halign:'center', align:'center', width:100" editor="text">列一</th><thdata-options="field:'value1',halign:'center', align:'center', width:100"editor="text">列二</th></tr></thead></table> 


以下是需要在JSP页面引入的js文件,只需要吧你的table的ID修改到js里面的var  tab=  这里,就可以。(var tab='#news_table';)


//这里是对easyUI的扩展,使得可以选中单独的cell单元格
$.extend($.fn.datagrid.methods, {editCell: function(jq,param){return jq.each(function(){var opts = $(this).datagrid('options');var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));for(var i=0; i<fields.length; i++){var col = $(this).datagrid('getColumnOption', fields[i]);col.editor1 = col.editor;if (fields[i] != param.field){col.editor = null;}}$(this).datagrid('beginEdit', param.index);for(var i=0; i<fields.length; i++){var col = $(this).datagrid('getColumnOption', fields[i]);col.editor = col.editor1;}});}});/* 单元格可编辑 */var tab='#news_table';var editIndex = undefined;function endEditing() {// 该方法用于关闭上一个焦点的editing状态if (editIndex == undefined) {return true}if ($(tab).datagrid('validateRow', editIndex)) {$(tab).datagrid('endEdit', editIndex);editIndex = undefined;return true;} else {return false;}};/**单击事件*/function singleClink() {endEditing();}/** 双击编辑 */function DbclkCommentCell(index, field, value) {if (endEditing()) {$(tab).datagrid('selectRow', index).datagrid('editCell', {index:index,field:field});editIndex = index;}};// 单元格失去焦点执行的方法function onAfterEdit(index, row, changes) {var updated = $(tab).datagrid('getChanges', 'updated');if (updated.length < 1) {editRow = undefined;$(tab).datagrid('unselectAll');return;} else {$(tab).datagrid('acceptChanges');// 传值,可做在线编辑功能/*submitForm(index, row, changes);*/}};




阅读全文
0 0
原创粉丝点击