Javascript 动态表格 Grid – 实现与使用(2)

DK 于2010,06,27发表 | 没有评论 »

上一篇文章中简单的说了一下我要实现的Javascript版的页面Grid控件的基本目标，并给出了相应的效果图。本篇文章简要的介绍一下实现的思路和dTable控件的使用方法。

控件主要由三个对象和两个可枚举的结构组成，它们分别是dtable，FuncMenu，cstmContextMenu三个对象，以及funcBtnsEvent和contextMemuItem两个可枚举的结构。命名有点乱…

dtable对象：负责与Table相关的样式和事件进行管理，提供相关的行数据。

FuncMenu对象：对功能按钮进行管理，负责功能按钮的内容，管理功能按钮的绑定事件，样式变化。

cstmContextMenu对象：自定义右键菜单对象，负责对自定义的右键菜单进行管理，包括内容，事件，样式的管理。

funcBtnsEvent对象：包含功能菜单对应的引用事件，在使用时应该进行重写。

contextMenuItem对象：包含右键菜单对应的引用事件，在使用时应该进行重写。

下面让我们看一下怎么使用。

我们需要在页面加载完成后初始化dtable对象，参数包含三个，Table的id，功能按钮的名称数组，右键菜单的名称数组。其中第三个参数可为空，当它为空的时候不启用右键菜单功能。

在初始化dtable对象之前你应该定义好相关的事件，否则相应的菜单在触发事件后可能会提醒你相对应的事件未定义。

另外你需要在页面中保持一点简单的结构，当然你也可以按照自己的意愿进行自定义。

  1. <div id="uitl_menu">
  2. <ul id="tool_btns_container"> </ul>
  3. </div>
  4. <div id="table_container">
  5. <table class="commonTable" id="yourtable"></table>
  6. </div>

下面给一个简单的例子。

  1. window.onload = function(){
  2. ocontextMenuItem.context_new.func = function(){
  3. o//Just do something you like...
  4. oalert('New Item');
  5. o}
  6. ocontextMenuItem.context_edit.func = function(){
  7. o//Just do something you like...
  8. oalert('Edit.aspx?Id='+d.currentRow.id);
  9. o}
  10. ocontextMenuItem.context_delete.func = function(){
  11. o//Just do something you like...
  12. ovar ids = '';
  13. ofor(var i in d.rowCollection){
  14. oids += d.rowCollection[i].id + ',';
  15. o}
  16. oalert('Delete.aspx?Id='+ids);
  17. o}
  18. ofuncBtnsEvent.tool_edit = function(){
  19. o//Just do something you like...
  20. oalert('Edit.aspx?Id='+d.rowCollection[0].id);
  21. o}
  22. ofuncBtnsEvent.tool_delete = function(){
  23. o//Just do something you like...
  24. ovar ids = '';
  25. ofor(var i in d.rowCollection){
  26. oids += d.rowCollection[i].id + ',';
  27. o}
  28. oalert('Delete.aspx?Id='+ids);
  29. o}
  30. otoolBar = ['tool_query','tool_new','tool_edit','tool_copy','tool_delete','tool_refresh','tool_save','tool_return']
  31. ovar contextMenuItems = ['context_new','context_edit','context_delete'];
  32. ovar d = new dtable('dtable',toolBar,contextMenuItems);
  33. }

通过定义的dtable对象d，你可以获取当前选中的所有行对象d.rowCollection，或者是在右键菜单触发时，你可以获取当前右键菜单发生的行d.currentRow，你可以在相应的事件函数内部进行你需要的处理。

由于图片和各种资源文件比较多，这里就不给出Demo了，你可以点击这里下载源代码。欢迎交流。

dTable源代码下载

转载请注明原文出处《Javascript 动态表格 Grid – 实现与使用(2)》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。

标签: , , , | 分类： Javascript, 编程 |

我要评论