jquery easyui tree控件复选框选择处理
2018-05-22 14:19
716 查看
------上级状态改变(勾选或取消勾选),所有下级状态跟着改变 ,在tree控件的onCheck事件中实现---------
cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动
onCheck: function (node, checked) {
var childList = $(this).tree('getChildren', node.target);
if (childList.length == 0) return;
var checkedTrue = function () {
childList.map(function (currentValue) {
var objTrue = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
if (objTrue != null && objTrue != undefined) {
var classTrue = objTrue.attr("class");
if (classTrue == "tree-checkbox tree-checkbox0")
objTrue.removeClass("tree-checkbox tree-checkbox0").addClass("tree-checkbox tree-checkbox1");
}
});
};
var checkedFalse = function () {
$.each(childList, function (index, currentValue) {
var objFalse = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
if (objFalse != null && objFalse != undefined) {
var classTrue = objFalse.attr("class");
if (classTrue == "tree-checkbox tree-checkbox1")
objFalse.removeClass("tree-checkbox tree-checkbox1").addClass("tree-checkbox tree-checkbox0");
}
});
};
var checkChangeProperties = checked == true ? checkedTrue() : checkedFalse();
}
--------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>报表设置</title>
<link href="Resource/Js/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet" />
<link href="Resource/Js/jquery-easyui-1.4.1/themes/icon.css" rel="stylesheet" />
<script src="Resource/Js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script src="Resource/Js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<style type="text/css">
a:focus {
outline-style: none;
-moz-outline-style: none;
}
</style>
</head>
<body>
<div class="easyui-layout" style="width: 480px; height: 380px;">
<div data-options="region:'south',split:true" style="height: 50px; padding: 8px; border: 0px solid #ccc; text-align: center;">
<a id="save" class="easyui-linkbutton">保存</a>
</div>
<div data-options="region:'center',title:'选择区域',iconCls:'icon-save'">
<ul id="classTree">
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var treeId = "classTree";
$(function () {
$('#' + treeId).tree({
checkbox: true,
url: 'ReportReportSet.aspx?action=inittree',
cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动
onCheck: function (node, checked) {
var childList = $(this).tree('getChildren', node.target);
if (childList.length == 0) return;
var checkedTrue = function () {
childList.map(function (currentValue) {
var objTrue = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
if (objTrue != null && objTrue != undefined) {
var classTrue = objTrue.attr("class");
if (classTrue == "tree-checkbox tree-checkbox0")
objTrue.removeClass("tree-checkbox tree-checkbox0").addClass("tree-checkbox tree-checkbox1");
}
});
};
var checkedFalse = function () {
$.each(childList, function (index, currentValue) {
var objFalse = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
if (objFalse != null && objFalse != undefined) {
var classTrue = objFalse.attr("class");
if (classTrue == "tree-checkbox tree-checkbox1")
objFalse.removeClass("tree-checkbox tree-checkbox1").addClass("tree-checkbox tree-checkbox0");
}
});
};
var checkChangeProperties = checked == true ? checkedTrue() : checkedFalse();
}
});
//保存
$("#save").click(function () {
var ids = getClassChecked(treeId);
$.ajax({
type: "get",
url: "ReportReportSet.aspx?action=save&ids=" + ids,
success: function (msg) {
layer.Invoke.Top.Alert(msg);
}
});
});
});
//获取选中节点
function getClassChecked(tvClassId) {
var nodes = $('#' + tvClassId).tree('getChecked');
var s = '';
for (var i = 0; i < nodes.length; i++) {
if (s != '') s += ',';
s += nodes[i].id;
}
return s;
}
//获取url参数值: alert(GetQueryString("参数名1"));
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</html>
cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动
onCheck: function (node, checked) {
var childList = $(this).tree('getChildren', node.target);
if (childList.length == 0) return;
var checkedTrue = function () {
childList.map(function (currentValue) {
var objTrue = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
if (objTrue != null && objTrue != undefined) {
var classTrue = objTrue.attr("class");
if (classTrue == "tree-checkbox tree-checkbox0")
objTrue.removeClass("tree-checkbox tree-checkbox0").addClass("tree-checkbox tree-checkbox1");
}
});
};
var checkedFalse = function () {
$.each(childList, function (index, currentValue) {
var objFalse = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
if (objFalse != null && objFalse != undefined) {
var classTrue = objFalse.attr("class");
if (classTrue == "tree-checkbox tree-checkbox1")
objFalse.removeClass("tree-checkbox tree-checkbox1").addClass("tree-checkbox tree-checkbox0");
}
});
};
var checkChangeProperties = checked == true ? checkedTrue() : checkedFalse();
}
--------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>报表设置</title>
<link href="Resource/Js/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet" />
<link href="Resource/Js/jquery-easyui-1.4.1/themes/icon.css" rel="stylesheet" />
<script src="Resource/Js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script src="Resource/Js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<style type="text/css">
a:focus {
outline-style: none;
-moz-outline-style: none;
}
</style>
</head>
<body>
<div class="easyui-layout" style="width: 480px; height: 380px;">
<div data-options="region:'south',split:true" style="height: 50px; padding: 8px; border: 0px solid #ccc; text-align: center;">
<a id="save" class="easyui-linkbutton">保存</a>
</div>
<div data-options="region:'center',title:'选择区域',iconCls:'icon-save'">
<ul id="classTree">
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var treeId = "classTree";
$(function () {
$('#' + treeId).tree({
checkbox: true,
url: 'ReportReportSet.aspx?action=inittree',
cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动
onCheck: function (node, checked) {
var childList = $(this).tree('getChildren', node.target);
if (childList.length == 0) return;
var checkedTrue = function () {
childList.map(function (currentValue) {
var objTrue = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
if (objTrue != null && objTrue != undefined) {
var classTrue = objTrue.attr("class");
if (classTrue == "tree-checkbox tree-checkbox0")
objTrue.removeClass("tree-checkbox tree-checkbox0").addClass("tree-checkbox tree-checkbox1");
}
});
};
var checkedFalse = function () {
$.each(childList, function (index, currentValue) {
var objFalse = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
if (objFalse != null && objFalse != undefined) {
var classTrue = objFalse.attr("class");
if (classTrue == "tree-checkbox tree-checkbox1")
objFalse.removeClass("tree-checkbox tree-checkbox1").addClass("tree-checkbox tree-checkbox0");
}
});
};
var checkChangeProperties = checked == true ? checkedTrue() : checkedFalse();
}
});
//保存
$("#save").click(function () {
var ids = getClassChecked(treeId);
$.ajax({
type: "get",
url: "ReportReportSet.aspx?action=save&ids=" + ids,
success: function (msg) {
layer.Invoke.Top.Alert(msg);
}
});
});
});
//获取选中节点
function getClassChecked(tvClassId) {
var nodes = $('#' + tvClassId).tree('getChecked');
var s = '';
for (var i = 0; i < nodes.length; i++) {
if (s != '') s += ',';
s += nodes[i].id;
}
return s;
}
//获取url参数值: alert(GetQueryString("参数名1"));
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</html>
相关文章推荐
- JQuery EasyUI TreeGrid控件的使用——支持拖拽与禁止拖拽
- EasyUI的下拉选择框控件方法被屏蔽处理方式
- JQuery EasyUI TreeGrid控件的使用——支持拖拽与禁止拖拽
- jquery easyui tree reload以后选中之前选择的节点
- JQuery中_Radio、DropDownList、Checkbox选择控件的处理
- winForm ComboBox 控件默认值绑定及只可选择不可输入设定处理
- 类库-----一些经常用到的对控件的处理1. 获取文本框中输入内容2.清除文本框内容3. 获取下拉列表框中选择内容,类型0为Text值,类型1为Value值4.DropDownList绑定日期
- EasyUI - 操作 Tree 控件
- 可选择的树控件状态改变时的通知消息处理
- jQuery Easyui datagrid/treegrid 清空数据
- 基于jQuery的日期选择控件
- jquery easyui tree改变默认图标
- jquery easyui tree异步加载的简单用法
- jQuery easyui treegrid无法传参到后台bugger一记
- winForm ComboBox 控件默认值绑定及只可选择不可输入设定处理
- easyUI tree jQuery
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- jquery 给table里的td动态创建控件并处理
- jQuery处理select的例子——jQuery处理控件系列
- ASP.NET MVC中使用jQuery EasyUI TreeGrid教程