Javascript 动态表格 Grid – 实现与使用(2)
上一篇文章中简单的说了一下我要实现的Javascript版的页面Grid控件的基本目标，并给出了相应的效果图。本篇文章简要的介绍一下实现的思路和dTable控件的使用方法。
控件主要由三个对象和两个可枚举的结构组成，它们分别是dtable，FuncMenu，cstmContextMenu三个对象，以及funcBtnsEvent和contextMemuItem两个可枚举的结构。命名有点乱…
dtable对象：负责与Table相关的样式和事件进行管理，提供相关的行数据。
FuncMenu对象：对功能按钮进行管理，负责功能按钮的内容，管理功能按钮的绑定事件，样式变化。
cstmContextMenu对象：自定义右键菜单对象，负责对自定义的右键菜单进行管理，包括内容，事件，样式的管理。
funcBtnsEvent对象：包含功能菜单对应的引用事件，在使用时应该进行重写。
contextMenuItem对象：包含右键菜单对应的引用事件，在使用时应该进行重写。
下面让我们看一下怎么使用。
我们需要在页面加载完成后初始化dtable对象，参数包含三个，Table的id，功能按钮的名称数组，右键菜单的名称数组。其中第三个参数可为空，当它为空的时候不启用右键菜单功能。
在初始化dtable对象之前你应该定义好相关的事件，否则相应的菜单在触发事件后可能会提醒你相对应的事件未定义。
另外你需要在页面中保持一点简单的结构，当然你也可以按照自己的意愿进行自定义。
下面给一个简单的例子。
- window.onload = function(){
- ocontextMenuItem.context_new.func = function(){
- o//Just do something you like...
- oalert('New Item');
- o}
- ocontextMenuItem.context_edit.func = function(){
- o//Just do something you like...
- oalert('Edit.aspx?Id='+d.currentRow.id);
- o}
- ocontextMenuItem.context_delete.func = function(){
- o//Just do something you like...
- ovar ids = '';
- ofor(var i in d.rowCollection){
- oids += d.rowCollection[i].id + ',';
- o}
- oalert('Delete.aspx?Id='+ids);
- o}
- ofuncBtnsEvent.tool_edit = function(){
- o//Just do something you like...
- oalert('Edit.aspx?Id='+d.rowCollection[0].id);
- o}
- ofuncBtnsEvent.tool_delete = function(){
- o//Just do something you like...
- ovar ids = '';
- ofor(var i in d.rowCollection){
- oids += d.rowCollection[i].id + ',';
- o}
- oalert('Delete.aspx?Id='+ids);
- o}
- otoolBar = ['tool_query','tool_new','tool_edit','tool_copy','tool_delete','tool_refresh','tool_save','tool_return']
- ovar contextMenuItems = ['context_new','context_edit','context_delete'];
- ovar d = new dtable('dtable',toolBar,contextMenuItems);
- }
通过定义的dtable对象d，你可以获取当前选中的所有行对象d.rowCollection，或者是在右键菜单触发时，你可以获取当前右键菜单发生的行d.currentRow，你可以在相应的事件函数内部进行你需要的处理。
由于图片和各种资源文件比较多，这里就不给出Demo了，你可以点击这里下载源代码。欢迎交流。
转载请注明原文出处《Javascript 动态表格 Grid – 实现与使用(2)》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
潍坊电视台征集台标，做了两个
Javascript 动态表格 – 实现与使用
由于项目需要，开发了一个轻量化的动态表格工具。
主要包括：
1.常用的功能按钮
2.自定义右键菜单
3.支持多选
4.根据选择的状态调整功能菜单的状态
5.列宽度调整
6.基本的样式改变标识当前状态 继续阅读 »
转载请注明原文出处《Javascript 动态表格 – 实现与使用》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。