jQuery UI - 多个序列化的.selectable列表

时间:2013-04-18 08:30:14

标签: css jquery-ui twitter-bootstrap

我正在制作一个错误报告处理系统,我正在尝试使用jQuery UI .selectable来获取用户点击的所有报告,但报告会根据它们来自的系统分组到列表中。可以同时选择多个列表。

在链接的演示中,我目前只是打印出ID,这对于单个列表可以正常工作。但是,当我从两个或更多不同的列表中选择项目时,已列出的ID将消失。它们似乎仍然被选中。可选择的眼睛,但它们不再被打印。 每次我点击不同的列表时,之前的ID都会消失,新的ID会出现。

有谁知道我能做些什么来打印所有东西?

另外,有没有办法将.ui选择的类应用于元素,给定一个应该被选择的字符串/数组值?基本上,与此脚本的功能相反。 (如果那有道理......?)

JSFiddle:http://jsfiddle.net/Kantana/Z3SBU/1/

的Javascript

$(function() {
    $(".selectable").bind("mousedown", function(event) {
        event.metaKey = true;
    }).selectable({
        stop: function() {
            var result = $("#selectedItems").empty();
            $(".ui-selected", this).each(function() {
                var itemId = $(this).attr('id');
                var item = itemId.replace("report_", "");
                result.append(" #" + item);
            });
        }
    });
})

CSS

此示例主要使用Twitter Bootstrap CSS。

HTML

<span id="selectedItems">None selected</span>

<div class="accordion" id="accordion2">
    <div class='accordion-group'>
        <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#1'>System 1 - All responding</a>
        </div>
        <div id='1' class='accordion-body collapse'>
            <div class='accordion-inner'>
                <ol class='selectable'>
                    <li class='report file ui-widget-content' id='report_60'>
                        Error #60 - Responding
                        <p class='tinytext'>Check type: ping</p>
                        <p class='tinytext'>Error message: unconfirmed_down</p>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class='accordion-group'>
        <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#2'>System 2 - All responding</a>
        </div>
        <div id='2' class='accordion-body collapse'>
            <div class='accordion-inner'>
                <ol class='selectable'>
                    <li class='report file ui-widget-content' id='report_62'>
                        Error #62 - Responding
                        <p class='tinytext'>Check type: ping</p>
                        <p class='tinytext'>Error message: unconfirmed_down</p>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class='accordion-group'>
        <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#3'>System 3 - All responding</a>
        </div>
        <div id='3' class='accordion-body collapse'>
            <div class='accordion-inner'>
                <ol class='selectable'>
                    <li class='report file ui-widget-content' id='report_56'>
                        Error #56 - Responding
                        <p class='tinytext'>Check type: Free Memory</p>
                        <p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
                    <li class='report file ui-widget-content' id='report_57'>
                        Error #57 - Responding
                        <p class='tinytext'>Check type: SSH</p>
                        <p class='tinytext'>Error message: CRITICAL - Socket timeout after 10 seconds</p>
                    <li class='report file ui-widget-content' id='report_55'>
                        Error #55 - Responding
                        <p class='tinytext'>Check type: ping</p>
                        <p class='tinytext'>Error message: PING CRITICAL - Packet loss = 100%</p>
                    <li class='report file ui-widget-content' id='report_54'>
                        Error #54 - Responding
                        <p class='tinytext'>Check type: Free Space All Disks</p>
                        <p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
                    <li class='report file ui-widget-content' id='report_58'>
                        Error #58 - Responding
                        <p class='tinytext'>Check type: Load Average</p>
                        <p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class='accordion-group'>
        <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#4'>System 4 - 1 error</a>
        </div>
        <div id='4' class='accordion-body collapse'>
            <div class='accordion-inner'>
                <ol class='selectable'>
                    <li class='report file ui-widget-content' id='report_59'>
                        Error #59 - Warning
                        <p class='tinytext'>Check type: ping</p>
                        <p class='tinytext'>Error message: unknown</p>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class='accordion-group'>
        <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#5'>System 5 - 1 error</a>
        </div>
        <div id='5' class='accordion-body collapse'>
            <div class='accordion-inner'>
                <ol class='selectable'>
                    <li class='report file ui-widget-content' id='report_61'>
                        Error #61 - Warning
                        <p class='tinytext'>Check type: Free Space All Disks</p>
                        <p class='tinytext'>Error message: DISK WARNING - free space: / 11230 MB (15% inode=78%): /dev 989 MB (99% inode=99%): /run 398 MB (99% inode=99%): /run/lock 5 MB (100% inode=99%): /run/shm 997 MB (100% inode=99%):</p>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

更改stop函数的范围选择整个手风琴中的ui-selected元素。指定$(".ui-selected", this)仅查看所选的单个项目,因为它包含对可选项的引用。

stop: function() {
    var result = $("#selectedItems").empty();

    //changed from this to #accordion
    $(".ui-selected", $("#accordion2")).each(function() {  
        var itemId = $(this).attr('id');
        var item = itemId.replace("report_", "");
        result.append(" #" + item);
    });
}

工作示例 http://jsfiddle.net/Z3SBU/2/