easyui label 编辑_实现Easyui 可编辑表格

一.前端框架使用的easyui框架

二.后端使用的是jfinal

三.效果图

四.html代码

data-options="border:false">

资产名称

创建的目标资产名称

function checkShow(value,rowData,rowIndex){

if(rowData.parent == Globals.Prop.treeRoot){

return "" + rowData.name;

}else if(rowData.id == Globals.Prop.treeRoot){

return "" + rowData.name;

}else{

return rowData.name;

}

}

注意：editor:{type:'textbox',options:{required:true,validType:'length[1,30]'}}表示targerName验证规则，长度不能超过30个字符

五.js代码

var createTable = {};

createTable.editIndex = undefined;//编辑index

//渲染源链接表和字段资产信息(treegrid)

createTable.two_tableTree = function(data){

createTable.dg = $("#dg");

createTable.dg.treegrid({

idField: 'id',

treeField: 'name',

singleSelect: false

});

var gridProp = {

data:data,

width:'550px',

height:'320px',

pagination:false,//显示分页

loadFilter: function(data){

return data.pageRow;

},

onBeforeExpand: function(row){

//点击表名时，加载字段信息 如果row.state = open 说明字段信息已从服务器获取到，不会重复加载数据

if(row.parent == 'ROOT'){

createTable.dg.treegrid('options').url = Globals.Prop.contextPath + "/meta/import/findColumn.bs";

}

return true;

},

onClickCell:function(field,row){

//点击触发编辑表格

createTable.onClickCell(row.id, field);

},

onLoadSuccess:function(data){

//折叠 unselectAll

createTable.dg.treegrid('unselectAll');

//createTable.dg.treegrid('collapseAll',Globals.Prop.treeRoot);

//createTable.dg.treegrid('expand',Globals.Prop.treeRoot);

checkAll();

}

};

createTable.dg.treegrid(gridProp);

//当treegrid height:0px时，处理

$(".datagrid").find(".datagrid-view2 .datagrid-header").css("height","25px");

$(".datagrid").find(".datagrid-view2 .datagrid-htable").css("height","25px");

$(".datagrid").find(".datagrid-view").css("height","330px");

$("#table_tree").find(".datagrid-body").css("overflow-x","auto");

//全选或反选

function checkAll(){

$("input[name='tableCheckAll']").click(function(){

var check = $(this).is(":checked");

if(!check){

createTable.dg.treegrid('unselectAll');

}

$("input[name='tableCheck']").each(function(){

if(check){

createTable.dg.treegrid('select',$(this).val());

}

$(this).prop("checked",check);

})

})

}

}

createTable.endEditing = function(){

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

if (createTable.dg.datagrid('validateRow', createTable.editIndex)){

createTable.dg.datagrid('endEdit', createTable.editIndex);

createTable.editIndex = undefined;

return true;

} else {

return false;

}

}

/**

* index:行位置

* field:字段名称

* 当选中一行,某字段时触发

*/

createTable.onClickCell = function(index, field){

if (createTable.editIndex != index){

if (createTable.endEditing()){

if(field == "name" || index == "root") return;

createTable.dg.treegrid('selectRow', index)

.treegrid('beginEdit', index);

var ed = createTable.dg.treegrid('getEditor',{index:index,field:field});

if (ed){

($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();

}

createTable.editIndex = index;

} else {

if (createTable.editIndex == undefined){return};

createTable.dg.treegrid('selectRow', createTable.editIndex);

}

}

}

六：后台实现

1> sql

select 'ROOT' id, '' parent,'test' name,'test' targetName, 'icon-userSchema' iconCls,'open' state,'' label from dual

union all

select t.id, 'ROOT' parent, t.name, t.name targetName, 'icon-table' iconCls,'closed' state,label from dmm_meta_table t where t.schema = ''

2>实现方法

List records = api.find(sql());

List tables = BsModelPropAdapter.adapterList(records, TableTree.class);

3>model

public class TableTree implements Serializable {

private static final long serialVersionUID = 1L;

private String id = ID.get();

private String name;

private String targetName;

private String parent;

private String state;

private String label;

public String getLabel() {

return label;

}

public void setLabel(String label) {

this.label = label;

}

public String getState() {

return state;

}

public void setState(String state) {

this.state = state;

}

/* easyui TreeGrid 匹配字段 */

@JSONField(name="_parentId")

private String _parentId;

private String iconCls;

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getParent() {

return parent;

}

public void setParent(String parent) {

this.parent = parent;

}

/* 返回Parent */

public String get_parentId() {

return parent;

}

public void set_parentId(String _parentId) {

this._parentId = _parentId;

}

public String getTargetName() {

return targetName;

}

public void setTargetName(String targetName) {

this.targetName = targetName;

}

public String getIconCls() {

return iconCls;

}

public void setIconCls(String iconCls) {

this.iconCls = iconCls;

}

}