jQuery可搜索复选框列表和三态复选框 [英] jQuery searchable checkbox list and tristate checkbox
问题描述
我正在构建一个简单的asp页面，在每个人的名字的左侧都有一个带有复选框的人员列表. 我设法创建了一个简单的jQuery脚本，该脚本允许根据输入隐藏和显示表行: http://jsfiddle.net/Tq97v/(第一部分)
如您所见，我可以输入部分名称，然后隐藏特定行. 使用红色的"x"，我可以取消选中所有复选框.
我现在想要做的是将静态红色"x"更改为三态复选框. 甚至不知道如何开始.
我必须将更改侦听器添加到列表中的每个复选框吗?
第二件事-如何在网站上创建同一插件"的多个实例. 现在，我正在通过它识别输入，但是最好以该输入作为参数来调用函数，并且在输入之后对表进行细化并创建必要的逻辑. 这样，我可以在页面上多次调用函数以拥有多个列表.
我并不需要整体解决方案(当然总是欢迎您使用:))，但我需要的是如何高效，尽可能优化地实现这一目标的想法，因为有时我的列表中包含500多个元素. /p>
P.S.不要看HTML代码，它是ASP生成的.
我找到了此插件: https://github.com/bcollins/jquery.tristate ，但我不知道如何在列表中使用它.
更新:
我设法将代码转换为函数，但是现在我必须为每个列表调用3个函数.
这是我更新的代码: http://jsfiddle.net/65MEV/4/
如何将其更改为一项功能?会更好吗?
这是我更新的代码.仍在思考执行不确定复选框"而不是删除图像的方法.
UPDATE2
我建立了工作代码:)
http://jsfiddle.net/65MEV/9/
但我想尽可能地改善它.
欢迎任何建议！
相对于另一个元素，创建同一插件访问元素的多个实例.
例如:在您的情况下，而不是将项目保留在jQuery对象中var $tableRows = $('table.myList tr');在事件中访问它们.
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
var $tableRows = $(this).next().next().find("table.myList tr");
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
，您只有实际的列表.
对于树状状态复选框，您不需要插件，只需添加一个按钮或链接，每单击一次它即可检查其状态，您可以通过http://jsfiddle.net/Tq97v/ (first part)
As You can see I can enter part of name and then specific row are hidden. Using red "x" I can uncheck all checkboxes.
What I'm trying to do now is to change that static red "x" into tristate checkbox. Don't have idea how to even start.
Do I must add change listener to every checkbox in my list?
Second thing - how to create multiple instances of the same "plugin" on site. Right now I'm identifying input by it, but it would be nice to call function with that input as param, and it would fine table after that input and create necessary logic. This way I could call function multiple times on page to have more than one list.
I'm not asking for whole solution (of course it is always welcome :) ) but what I need is idea how to accomplish this in efficient way and as optimized as possible, because sometimes my list has 500+ elements.
P.S. don't look at HTML code, it is ASP generated.
I found this plugin: https://github.com/bcollins/jquery.tristate, but I have no idea how to use it with my list.
UPDATE:
I've managed to turn my code into functions, but right now I must call 3 functions for every list.
Here is my updated code: http://jsfiddle.net/65MEV/4/
How can I change it to one function? Will it be better?
This is my updated code. Still thinking about way of doing that Indeterminate Checkbox instead of my remove image.
UPDATE2
I build working code :)
http://jsfiddle.net/65MEV/9/
But I would like to improve it as much as possible.
Any suggestions are welcome!
To create multiple instances of the same plugin access elements relatively to an other element.
For example: in your case instead of keeping the item in a jQuery object var $tableRows = $('table.myList tr'); access them in the event.
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
var $tableRows = $(this).next().next().find("table.myList tr");
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
and you only have your actual list.
And for the tree state checkbox you don t need a plugin just add a button or link and every click check it status you can keep the status by jQuery data and change the element image according to this data.
这篇关于jQuery可搜索复选框列表和三态复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
