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

这是一个系列文章,前两篇文章分别的介绍了一个轻量级的Javascript版Grid控件的实现目标和简单的使用方法。

最近又对这个控件进行了一个简单的改进,主要是对行的点击选择行为进行了修改,使之更加符合通用的用户使用习惯。将以前的单一的点击选择方式改为:单击,Ctrl+单击,Shift+单击。

单击:保持当前选中的只有一列。

Ctrl+单击:可以不连续的选中多行。

Shift+单击:用于连续的选中多行。

dTableV0.1源代码下载

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

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

上一篇文章中简单的说了一下我要实现的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 动态表格 – 实现与使用

由于项目需要,开发了一个轻量化的动态表格工具。

主要包括:
1.常用的功能按钮
2.自定义右键菜单
3.支持多选
4.根据选择的状态调整功能菜单的状态
5.列宽度调整
6.基本的样式改变标识当前状态 继续阅读 »

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