Javascript 动态表格 Grid – 实现与使用(3)
这是一个系列文章，前两篇文章分别的介绍了一个轻量级的Javascript版Grid控件的实现目标和简单的使用方法。
最近又对这个控件进行了一个简单的改进，主要是对行的点击选择行为进行了修改，使之更加符合通用的用户使用习惯。将以前的单一的点击选择方式改为：单击，Ctrl+单击，Shift+单击。
单击：保持当前选中的只有一列。
Ctrl+单击：可以不连续的选中多行。
Shift+单击：用于连续的选中多行。
转载请注明原文出处《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对象之前你应该定义好相关的事件，否则相应的菜单在触发事件后可能会提醒你相对应的事件未定义。
另外你需要在页面中保持一点简单的结构，当然你也可以按照自己的意愿进行自定义。
下面给一个简单的例子。
- 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协议。
通过自定义方法修正mouseover/mouseout事件
在Javascript中mouseover/mouseout 事件冒泡停止失效解决办法中我们通过checkHover()方法解决在触发mouseover和mouseout事件的时候无法阻止事件分发的bug。
通过这个方法我们成功的解决了这个问题，但是这个方法是用起来还是比较麻烦。在每次调用相关的方法的时候你都要去检查一下，让我们代码多了很多重复无用的代码。点击查看Demo效果 继续阅读 »
转载请注明原文出处《通过自定义方法修正mouseover/mouseout事件》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
在页面标签内部调用事件与事件侦听器绑定事件的不同
我们在给元素添加事件的时候可能会用到三种方法：
1.直接写到dom文档中：
2.使用元素的事件属性赋值：
node.onclick = myFunc;3.使用事件侦听器：
node.addEventListener('click',myFunc,false);//W3C的方法
node.attachEvent('onclick',myFunc);//IE我们将myFunc定义为
- function myFunc(){
- alert(this);
- }
不知道你注意过没有，用第一种方法与第二以及第三种方法触发事件时this指代的值是不同的。
根据我们的理解当元素触发事件时，调用我们自定义方法的对象为我们触发事件的元素，this指代的应该为当前元素。当我们使用第二和第三种方法时候这么说是没问题的，提示框提示的也是当前的元素。但是通过第一种方法执行的时候提示框提示的却是window对象！这是为什么呢？是出现bug了吗？事实上不是的。
如果我们使用调试工具查看一下元素的onclick属性你会发现它们之间的不同。
第一种情况：
node.onclick = function(){
omyFunc();
}第二种情况：
- node.onclick = function(){
- oalert(this);
- }
第三种情况：
在IE下面用attachEvent方法添加事件的时候内部的this指代的是window对象，不知道到IE在想什么，呵呵。但是addEventListener中this指代的是当前的事件对象，当然IE下面你可以用别的办法解决这个问题。
现在应该清楚了，第一种情况的时候相当于在onclick属性中执行的是我们定义的myFunc方法，而调用myFunc函数的对象为 window，所以this也就是window。而第二和第三种情况则相当于将myFunc函数对象赋给onclick属性，当触发事件时执行的是 myFunc函数内部的代码，调用对象为当前的对象，所以this也就是当前的node。
不知道你在写javascript的时候碰到过这个问题没有？
转载请注明原文出处《在页面标签内部调用事件与事件侦听器绑定事件的不同》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
在某个元素上阻止鼠标右键默认事件
最近在做一个小东西的时候需要在某一个元素上“右击”触发一个自定义菜单，通过自定义的菜单对右击的条目进行编辑。这就要求屏蔽默认的右键菜单
IE和FF下面的元素都有oncontextmenu这个方法，在FF下面只要通过event.preventDefault()方法就可以轻松实现这个效果。IE并不支持这个方法，在IE下面一般是通过触发方法后return false来实现阻止默认事件的。
通常我们使用阻止右键事件是在全局阻止，即在document层面就将右键拦截，现在我想要实现的效果是只在特定的区域阻止默认的右键事件，而其他区域并不影响。
通过实验我发现要是在IE下绑定的方法中return false后在document层面上可以实现阻止右键的默认行为。但是具体到某一个元素比如div，则失效。
最后通过查找手册发现，IE下的event对象有一个returnValue属性，如果将这个属性设置为false则不会触发默认的右键事件。类似如下：
- event.returnValue = false;
只要加入这句就实现了我想要的效果。请点击查看Demo效果。
这个效果兼容IE6+，FF，但是opera压根就没有oncontextmenu这个方法所以也就不能简单的通过这个方法实现，要想实现还需要通过其他的手段。
转载请注明原文出处《在某个元素上阻止鼠标右键默认事件》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。