Question

我正在尝试使用UI Selectable进行两组选择。

这个过程是这样的：

首先，我选择几行，然后单击一个按钮设置完成第一轮选择。并且所选择的行将突出显示为一种颜色，即“红色”。然后，我开始第二轮选择。第二轮选择不应更改第一轮选定行的颜色。第二轮选择后，单击按钮设置第二轮选择的完成;第二轮选择将以另一种颜色突出显示，例如“绿色”。

我可以很容易地进行第一轮选择，但我无法弄清楚如何在保持第一轮选择颜色不变的情况下进行第二轮选择。我可以手动为第一轮选择添加一个id，但是当我进行第二轮选择时，我不知道如何保持第一轮选择的颜色不变。我甚至尝试为第一轮选定的结果制作一个新的CSS样式以保持其突出显示的颜色，但它只是不起作用。

在这里添加一些代码：

<!--<link rel="stylesheet" type="text/css" href="js/themes/blue/style.css"/>-->
<link rel="stylesheet" type="text/css" href="js/css/redmond/jquery-ui-1.8.20.custom.css">
<style>

#tablebody .ui-selecting { background: #F5F5DC; }
#tablebody .ui-selected { background: #98F5FF; color: black; }
.ui-selected-grp1 {background: red; color: black; }
#tablebody { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#tablebody tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="js/js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#metatable").tablesorter();
    $("#tablebody").selectable();
        $('#grp1').click(function(){
        $('tr.ui-selected').addClass('ui-selected-grp1');

        return false;
    })
})
</script>

正如您所看到的，我尝试添加类“ui-selected-grp1”来控制第一轮选择颜色，但它不起作用。当我开始进行第二轮选拔时，第一轮的亮点刚刚消失。你能给我一些关于这个过程的建议或代码示例吗？

Answer 1

这是实现这一目标的基本方法 - http://jsfiddle.net/vC7NP/。通过jQuery的css方法设置所选元素的样式将覆盖jQuery UI应用的任何CSS，因此第一轮的颜色变化应该保留。

如何通过JQuery UI可选小部件进行两组选择？

1 个答案: