ecology开发之可编辑表格组件-赫非域

组件

可编辑表格组件

备注

功能说明

基于jQuery开发的列表在线编辑组件，其特点如下：
1、负责整体表单控件的布局
2、负责表单组件美化
3、负责表单的整体样式
4、负责记录添加，删除，复制以及表单序列化
5、支持ajax和本地化两种形式填充原有数据；
6、支持添加行后事件回调；

使用场景 :
1.批量记录添加
2. 批量记录编辑

使用说明

1.引入的本插件所依赖的js文件
如果没有引入以下js，那么需要引入以下js：
<script src=”/js/ecology8/jquery_wev8.js”></script>

<!–checkbox组件–>
<link href=”/js/ecology8/jNice/jNice/jNice_wev8.css” type=text/css rel=stylesheet>
<script language=javascript src=”/js/ecology8/jNice/jNice/jquery.jNice_wev8.js”></script>
<!– 下拉框美化组件–>
<link href=”/js/ecology8/selectbox/css/jquery.selectbox_wev8.css” type=text/css rel=stylesheet>
<script language=javascript src=”/js/ecology8/selectbox/js/jquery.selectbox-0.2_wev8.js”></script>

<!– 泛微可编辑表格组件–>
<link rel=”stylesheet” href=”/wui/theme/ecology8/weaveredittable/css/WeaverEditTable_wev8.css”>
<script src=”/wui/theme/ecology8/weaveredittable/js/WeaverEditTable_wev8.js”></script>

2、配置并生成可编辑表格

{width:”10%”,colname:”描述信息”,itemhtml:”<input type=’text’ name=’descinfo’ style=’width: 50px’><span class=’mustinput’></span>”},

{width:”15%”,colname:”数据库字段”,itemhtml:”<input type=’text’ name=’datafield’>”},

{width:”15%”,colname:”字段显示名”,itemhtml:”<input type=’text’ name=’datalabel’>”},

{width:”40%”,colname:”字段类型”,itemhtml:”<select name=’datatype’ style=’width: 200px;height: 30px’><option value=’0′>单行文本框</option><option value=’1′>浏览框</option></select><span style=’vertical-align: middle’>长度:</span><input name=’datalength’ type=’text’ style=’width: 100px;vertical-align: middle’ ><span class=’mustinput’></span><span style=’vertical-align: middle’>类型:</span><select name=’ctype’ style=’width: 100px;height: 30px’><option value=’0′>文本</option><option value=’1′>数据</option></select>”},

{width:”15%”,colname:”顺序”,itemhtml:”<input type=’text’ name=’dataorder’>”}];

//普通模式使用
var option= {basictitle:”主字段信息”‘,colItems:items};

//基于ajax方式使用
var option={navcolor:”#003399″,basictitle:”主字段信息”,colItems:items,useajax:true,ajaxurl:’/data/getdatas’,ajaxparams:’’};

//生成相应的可编辑表格对象
var group=new WeaverEditTable(option);
//将可编辑表格容器附加到dom节点上
$(“.groupmain”).append(group.getContainer());

</script>

3、获取表单所有字段的值,
group.getTableSeriaData();

6、效果图如下：

例子

例子：http://192.168.4.44:8080/wui/theme/ecology8/weaveredittable/page/weaverEditTableDemo.html

组件初始化参数

是否必须

类型

描述

* Basictitle

是

string

组标题(例如:主字段信息)

optionHeadDisplay

否

string

是否显示组信息，默认显示。若设置为none，则不显示

navcolor

否

string

组标题前色块的颜色(默认插件自动生成)

addrowtitle

否

string

展示添加行按钮

copyrowtitle

否

string

展示复制行按钮

deleterowstitle

否

string

展示删除行按钮

* colItems

是

string

由表头列构成的集合，每个表头列由以下部分组成

{width:”所占百分比宽度”,”colname”:”表头列具体名称”,itemhtml:”该表头列里面放置的html代码”}

configCheckBox

否

Boolean

自定义checkbox框，默认为false，由系统提供默认的。

checkBoxItem

否

json

{width:”所占百分比宽度”,”colname”:”表头列具体名称”,itemhtml:”该表头列里面放置的html代码”}

useajax

否

boolean

采用ajax方式初始化插件,主要用于编辑已有数据

ajaxurl

否

string

请求路劲

ajaxparams

否

string

请求参数

usesimpledata

否

boolean

true|fase 当值为true时,则该可编辑表格默认以初始化数据初始化，初始化的具体数据配置详见initdatas

initdatas

否

json

初始化的数据,具体格式参见
[
[
{name:”descinfo”,value:”张三”,iseditable:true,type:”input”},
{name:”datafield”,value:”字段信息1″,iseditable:false,type:”input”},
{name:”datalabel”,value:”字段显示名1″,iseditable:true,type:”input”},
{name:”datatype”,value:”0″,iseditable:true,type:”select”},
{name:”datalength”,value:”1″,iseditable:true,type:”input”},
{name:”ctype”,value:”1″,iseditable:true,type:”select”},
{name:”dataorder”,value:”排序”,iseditable:true,type:”input”}
],[
…
]
];

type的取值：
1、input
2、select
3、date
4、browser
5、span
6、checkbox

openindex

否

boolean

true|false默认给表单字段名称添加下标索引
例如<input name=’username_1’>

canDrag

否

boolean

生成的table是否允许拖动排序，默认为false

如果使用该功能，必须引入如下两个js文件：
<link type=”text/css” href=”/js/ecology8/base/jquery-ui.css” rel=stylesheet>
<script type=”text/javascript” src=”/js/ecology8/base/jquery-ui.js”></script>

orderField

否

string

拖动排序时序号保存字段，只有当canDrag设置为true时，该字段才生效

addAccesskey

否

string

添加行快捷键，如A

copyAccesskey

否

string

复制行快捷键，如C

delAccesskey

否

string

删除行快捷键，如D

对组件提供了以下功能函数

方法1

返回类型

描述

WeaverEditTable

无

可编辑表格构造函数,新建入口

方法参数

是否必须

类型

描述

方法2

返回类型

描述

getContainer

无

获取该可编辑表格对应的dom对象

方法参数

是否必须

类型

描述

方法3

返回类型

描述

addRow

无

添加一行

方法参数

是否必须

类型

描述

方法4

返回类型

描述

deleteRows

无

删除行

方法参数

是否必须

类型

描述

方法5

返回类型

描述

copyRows

无

复制行

方法参数

是否必须

类型

描述

方法6

返回类型

描述

getTableSeriaData

无

获取可编辑表格的表单序列化信息

方法参数

是否必须

类型

描述

方法7

返回类型

描述

getSimpleTableJson

无

获取表格对应的json对象

方法参数

是否必须

类型

描述

方法8

返回类型

描述

addCustomRow

无

添加定制行

方法参数

是否必须

类型

描述

trhtml

是

string

tr字符串

方法9

返回类型

描述

reload

无

重新加载已经保存的数据（仅当useajax=true时有效）

方法参数

是否必须

类型

描述

对组件提供了以下隐藏域变量，用于记录行数

隐藏域名

说明

weaverTableRows

总行数，比如一共增加了10行，但删除了其中的5行，该值依然为10.

weaverTableRealRows

实际行数，比如一共增加了10行，但删除了其中的5行，该值就是5.

*注:

1.插件默认所有按钮都展示,但如果在配置条件里面添加了addrowtitle 或 copyrowtitle 或 deleterowstitle ,则按照用户配置的按钮进行显示

2.当在itemhtml里的输入框后添加<span class=’mustinput’></span>,则该输入框则为必填项，由插件控制

3.当采用ajax方式初始化可编辑表格组件时,返回的数据格式为

[[{name:”组件名称例如:username”,value:”组件值例如:张三”,iseditable:”是否可编辑 true|false”,type:”控件类型例如:input|select”},{}],[]]

参考格式()

var ajaxdata=[
[
{name:”descinfo”,value:”张三”,iseditable:true,type:”input”},
{name:”datafield”,value:”字段信息1″,iseditable:false,type:”input”},
{name:”datalabel”,value:”字段显示名1″,iseditable:true,type:”input”},
{name:”datatype”,value:”0″,iseditable:true,type:”select”},
{name:”datalength”,value:”1″,iseditable:true,type:”input”},
{name:”ctype”,value:”1″,iseditable:true,type:”select”},
{name:”resuouseid”,value:”1″,label:”张三”,iseditable:true,type:”browser”},//type为browser时，需要使用label来存储browserSpanValue的值
{name:”isdefault”,checked:”true”,iseditable:true,type:”checkbox”},//用于选中或者不选中checkbox框
{name:”dataorder”,value:”排序”,iseditable:true,type:”input”}
],[

]

4.browser组件的配置

如碰到问题，请直接联系李三杰

5.如果组件字符串中含有#rowIndex#的字样，会被替换为当前行号

如：getDate(span_#rowIndex#)，解析后会变成getDate(span_0)的模样。

转载请注明：赫非域 » ecology开发之可编辑表格组件

与本文相关的文章