Question

我有一张这样的表：

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        |

更新列包含复选框<input type='checkbox' />。

在呈现表之前确定复选框初始状态，但是在从数据库中提取行之后（它基于条件集，在服务器端）。

默认情况下，系统可以选中此复选框，默认情况下取消选中或禁用该复选框（disabled='disabled'为input属性）。

我正在使用JQuery's Tablesorter对表格进行排序。我希望能够按包含复选框的列进行排序。怎么可能（我可以将一些额外的属性传递给我的input元素，如果它有帮助......）？我应该编写自己的解析器来处理吗？

Answer 1

在输入之前添加隐藏的跨度，并在其中包含一些文本（将用于对列进行排序）。类似的东西：

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

如果需要，您可以将一个事件附加到复选框，以便在选中/取消选中时修改上一个兄弟（跨度）的内容：

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

注意：我没有检查过代码，因此可能有错误。

Answer 2

这是Haart答案的更完整/更正确的版本。

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

});

Answer 3

您可以使用tablesorter jQuery插件并添加一个能够对所有复选框列进行排序的自定义解析器：

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

Answer 4

我正在添加此响应，因为我正在使用带有新功能的受支持/分叉jQuery TableSorter库。包含用于输入/选择字段的可选解析器库。

http://mottie.github.io/tablesorter/docs/

这是一个例子： http://mottie.github.io/tablesorter/docs/example-widget-grouping.html 它包括输入/选择解析器库“parser-input-select.js”，添加头对象并声明列和解析类型。

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

包括的其他解析器包括：日期解析（w / Sugar＆amp; DateJS），ISO8601日期，月份，2位数年份，工作日，距离（英尺/英寸和公制）和标题格式（删除“A”＆amp;“该“）。

Answer 5

您可以向TableSorter添加自定义解析器，如下所示：

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
});

然后在你的表中使用它

$("table").tablesorter(headers:{0:{sorter:input}});

Answer 6

最后一点让Aaron的答案完成并避免堆栈溢出错误。因此，除了使用上述Target Unreachable, identifier 'settingsBean' resolved to null javax.el.PropertyNotFoundException: Target Unreachable, identifier 'settingsBean' resolved to null at com.sun.el.parser.AstValue.getTarget(AstValue.java:174) at com.sun.el.parser.AstValue.getType(AstValue.java:86) at com.sun.el.ValueExpressionImpl.getType(ValueExpressionImpl.java:201) at com.sun.faces.facelets.el.TagValueExpression.getType(TagValueExpression.java:98) at org.primefaces.util.ComponentUtils.getConverter(ComponentUtils.java:132) at org.primefaces.renderkit.InputRenderer.getConvertedValue(InputRenderer.java:171) at javax.faces.component.UIInput.getConvertedValue(UIInput.java:1045) at javax.faces.component.UIInput.validate(UIInput.java:975) at javax.faces.component.UIInput.executeValidate(UIInput.java:1248) at javax.faces.component.UIInput.processValidators(UIInput.java:712) at javax.faces.component.UIForm.processValidators(UIForm.java:253) at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1258) at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1258) at org.primefaces.component.layout.Layout.processValidators(Layout.java:233) at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1258) at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1258) at javax.faces.component.UIViewRoot.processValidators(UIViewRoot.java:1195) at com.sun.faces.lifecycle.ProcessValidationsPhase.execute(ProcessValidationsPhase.java:76) at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101) at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:198) at javax.faces.webapp.FacesServlet.service(FacesServlet.java:646) at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1682) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:318) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:160) at org.apache.catalina.core.StandardPipeline.doInvoke(StandardPipeline.java:734) at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:673) at com.sun.enterprise.web.WebPipeline.invoke(WebPipeline.java:99) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:174) at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:415) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:282) at com.sun.enterprise.v3.services.impl.ContainerMapper$HttpHandlerCallable.call(ContainerMapper.java:459) at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:167) at org.glassfish.grizzly.http.server.HttpHandler.runService(HttpHandler.java:201) at org.glassfish.grizzly.http.server.HttpHandler.doHandle(HttpHandler.java:175) at org.glassfish.grizzly.http.server.HttpServerFilter.handleRead(HttpServerFilter.java:235) at org.glassfish.grizzly.filterchain.ExecutorResolver$9.execute(ExecutorResolver.java:119) at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeFilter(DefaultFilterChain.java:284) at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeChainPart(DefaultFilterChain.java:201) at org.glassfish.grizzly.filterchain.DefaultFilterChain.execute(DefaultFilterChain.java:133) at org.glassfish.grizzly.filterchain.DefaultFilterChain.process(DefaultFilterChain.java:112) at org.glassfish.grizzly.ProcessorExecutor.execute(ProcessorExecutor.java:77) at org.glassfish.grizzly.nio.transport.TCPNIOTransport.fireIOEvent(TCPNIOTransport.java:561) at org.glassfish.grizzly.strategies.AbstractIOStrategy.fireIOEvent(AbstractIOStrategy.java:112) at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.run0(WorkerThreadIOStrategy.java:117) at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.access$100(WorkerThreadIOStrategy.java:56) at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy$WorkerThreadRunnable.run(WorkerThreadIOStrategy.java:137) at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:565) at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.run(AbstractThreadPool.java:545) at java.lang.Thread.run(Thread.java:722)功能外，我还必须在页面中添加以下内容，以便在运行时使用更新的复选框值。

$.tablesorter.parser()

Answer 7

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});

Answer 8

我在其他答案中尝试了多种方法，但最终使用了salgiza接受的答案，以及马丁关于更新表格模型的评论。但是，当我第一次实现它时，我将更新行设置在复选框onchange触发器内，就像建议的措辞一样。这会在检查/取消选中复选框时重新排列我的行，我发现这非常令人困惑。这些线条在点击时跳开了。因此，我将更新功能绑定到实际的复选框列标题，以便在单击以更新排序时仅重新排列行。它就像我想要的那样工作：

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});

Jquery Tablesorter - 按<input />元素的列排序

8 个答案: