JQuery Easyui Tree的oncheck事件实现代码

2016-02-19 13:04 35 1 收藏

今天图老师小编要向大家分享个JQuery Easyui Tree的oncheck事件实现代码教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】


用firebug查看其生成html,发现其checkobx是假的,只是一个span,来回的变样式而已,汗

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)


代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
$(".tree-checkbox", tree).unbind(".tree").bind("click.tree", function() {
if ($(this).hasClass("tree-checkbox0")) {
$(this).removeClass("tree-checkbox0").addClass("tree-checkbox1");
} else {
if ($(this).hasClass("tree-checkbox1")) {
$(this).removeClass("tree-checkbox1").addClass("tree-checkbox0");
} else {
if ($(this).hasClass("tree-checkbox2")) {
$(this).removeClass("tree-checkbox2").addClass("tree-checkbox1");
}
}
}
_2eb($(this).parent());
_2ec($(this).parent());
return false;
});

然后再看其onClick事件脚本
代码

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
$(".tree-node", tree)
....
bind("click.tree", function() {
$(".tree-node-selected", tree).removeClass("tree-node-selected");
$(this).addClass("tree-node-selected");
if (opts.onClick) {
var _2ea = this;
var data = $.data(this, "tree-node");
opts.onClick.call(this, { id: data.id, text: data.text, attributes: data.attributes, target: _2ea });
}
})

相应的修改其check脚本

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
$(".tree-checkbox", tree).unbind(".tree").bind("click.tree", function() {
if ($(this).hasClass("tree-checkbox0")) {
$(this).removeClass("tree-checkbox0").addClass("tree-checkbox1");
} else {
if ($(this).hasClass("tree-checkbox1")) {
$(this).removeClass("tree-checkbox1").addClass("tree-checkbox0");
} else {
if ($(this).hasClass("tree-checkbox2")) {
$(this).removeClass("tree-checkbox2").addClass("tree-checkbox1");
}
}
}
_2eb($(this).parent());
_2ec($(this).parent());
return false;
}).bind("click.tree", function() {//gzl增加
if ($(this).hasClass("tree-checkbox1") && opts.onCheck) {
var _2e9 = this;
var data = $.data(this, "tree-node");
opts.onCheck.call(this, { id: data.id, text: data.text, attributes: data.attributes, target: _2e9 });
}
});

可是怎么也取不到Data值,最后只好$(this).parent().click(),click事件加check是否变为选中判断,两个事件用一个方法,唉
多希望出个新版本,或者哪位大牛给改改,我能力太有限了。

来源:http://www.tulaoshi.com/n/20160219/1602911.html

延伸阅读
标签: Web开发
基于jquery的锁定弹出层 这个东西也是随手总结出来的,引用了一些js框架jquery的方法。 div遮盖其他控件的方法参考了 对于需要遮盖flash的,请将flash控件的WMode变量值设置为Transparent 使用方法: 代码如下: script src="jquery.js"/script script src="effect/maskDiv.js"/script script //配置模块 var moduleEvent = [{"i...
标签: Web开发
多选效果如下图 代码如下: 代码如下: script type="text/javascript"!-- $(document).ready(function() { $("#selectall").click(selectAll); }); function selectAll() { var checked = $("#selectall").attr("checked"); $(".selectable").each(function() { var subchecked = $(this).attr("checked"); if (subchecked != ch...
标签: Web开发
从那以后,我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程。 我将向你们逐步解说整个的过程,不仅仅因为要展示jQuery代码的简介,同时也要揭示jQuery库中的若干高级特性。 首先,代码 代码如下: $(document).ready(function() { $('.styleswitch').click(funct...
标签: Web开发
直接看代码: 代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" title/title scri...
标签: Web开发
关键代码: 代码如下: $(function(){ $(".tabs li").eq(0).css("background","#499AFF"); $(".tabs div").eq(0).show(); $(".tabsulli").click(function(i){ $(this).css("background","#499AFF").siblings().css("background","#ffffff"); $(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); return false; }) ...

经验教程

757

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部