实现Easyui 可编辑表格
一.前端框架使用的easyui框架
二.后端使用的是jfinal
三.效果图
四.html代码

<div id="table_tree" class="easyui-panel" id="div_panel" style="width:550px;height:350px;padding-top:5px;overflow:auto;" data-options="border:false">
<table class="easyui-treegrid" id="dg"
data-options="border:false">
<thead>
<tr>
<th data-options="field:'name',formatter:checkShow" width="280">
<font class="my-datagrid-header">资产名称</font>
</th>
<th data-options="field:'targetName',editor:{type:'textbox',options:{required:true,validType:'length[1,30]'}}" width="280">
<font class="my-datagrid-header">创建的目标资产名称</font>
</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
function checkShow(value,rowData,rowIndex){
if(rowData.parent == Globals.Prop.treeRoot){
return "<input name='tableCheck' type='checkbox' value='"+rowData.id+"'>" + rowData.name;
}else if(rowData.id == Globals.Prop.treeRoot){
return "<input name='tableCheckAll' type='checkbox' value='"+rowData.id+"'>" + 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<Record> records = api.find(sql());
List<TableTree> 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;
} }
实现Easyui 可编辑表格的更多相关文章
- JavaScript- jquery easyui 可编辑表格插件 easyui.editgrid
最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...
- easyui,datagrid表格,行内可编辑
最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...
- EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他
原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...
- Easyui 编辑表格行删除
1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...
- easyui datagrid可编辑表格使用经验分享
文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...
- EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox
这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下 ...
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、
脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...
- [HTML]HTML5实现可编辑表格
HTML5实现的简单的可编辑表格 [HTML]代码 <!DOCTYPE html > <html > <head> <meta charset="u ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
随机推荐
- Discuz常见小问题-如何设置为人工审核
全局-注册与访问控制-人工审核
- [javase学习笔记]-8.1 statickeyword之特点
这一节我们来学习java语言中一个新的keyword就是statickeyword. 当然对于每个keyword,我们都要明白的是它有什么作用,怎么用.我们先来看一个样例: class Person ...
- [转发]在Visual Studio 2010/2012/2013/2015上使用C#开发Android/IOS安装包和操作步骤
官方学习文档:http://developer.xamarin.com/guides/android/getting_started/ 官方学习例子:http://developer.xamarin. ...
- c++实现医院检验科排班程序
c++实现医院检验科排班程序 1.背景: 医院急诊检验科24h×7×365值班.工作人员固定.採取轮班制度.确保24h都有人值班. 本文就通过C++实现编敲代码自己主动排班,并能够转为Excel打印. ...
- ueditor使用遇到的问题
1.文件没法上传,需要引入ueditor官网说的那几个jar包才行 2.上传的文件读不出来,路径不对,需要把config.json里面的所有[“”]替换成[/你的项目路径],即把所有的Prefix路径 ...
- java FileI(O)nputStream为什么比BufferedI(O)utputStream慢?
因为buffered多了一个缓冲区,读和写都是先把硬盘或者内存中的数据放到内存中一块缓存区域,到一定大小读写到硬盘或者内存 package io; import java.io.*; public ...
- FlatBuffers与protobuf性能比較
FlatBuffers发布时.顺便也发布了它的性能数据,详细数据请见Benchmark. 它的測试用例由下面数据构成"a set of about 10 objects containing ...
- 笔记本装ubuntu发热量大该如何缓解?
win7下的双卡技术是optimus, 驱动完善,不会让两个显卡同时满负荷工作, linux下由于驱动软件闭源, xorg的开源驱动没有做这个显卡电源管理, 目前的N卡较好解决方案就是bumblebe ...
- Linux的内存映像导出接口—kcore
发表于 2012-4-10 15:00 /proc/kcore文件提供了整个机器的内存映像,和vmcore不同的是,它提供了一个运行时的内存映像,为此和vmcore一样,内核提供了一个类似的但是稍 ...
- jquery 属性操作 attr( ) prop()css( )区别
一 attr () 和 prop( ) 操作属性 谈谈我的总结: 1 2 1 属性的定义,根据W3C手册所述:属性包括,标准属性:id class style title 语言属性 lang dir以 ...