在 SlickGrid 中选择带有复选框的行

发布于 2024-10-04 10:57:59 字数 2058 浏览 1 评论 0原文

我需要创建一个列,您可以在其中使用输入:复选框选择网格行。雅虎、谷歌等使用的网格也有类似的东西。 我做了一些东西,但我遇到了一些问题,我认为这也不是一个好的方法。

可以在行中设置复选框并直接单击它们,而不是像 example4-model 那样?

我的想法是:

    < div id="inlineFilterPanel" class="slick-header-column" style="padding: 3px 0; color:black;">
            <input type="checkbox" name="selectAll" id="selectAll" value="true" / >
   < input type="text" id="txtSearch2" value="Desktops" />
        </div>

d["check"] = '< INPUT type=checkbox value='true' name='selectedRows[]' id='sel_id_<?php echo $i; ?>' class='editor-checkbox' hideFocus />';

grid.onSelectedRowsChanged = function() {
                selectedRowIds = [];
    $('#myGrid' + ' :checkbox').attr('checked', '');
                var rows = grid.getSelectedRows();
                for (var i = 0, l = rows.length; i < l; i++) {
                    var item = dataView.rows[rows[i]];
                    if (item) {
      selectedRowIds.push(item.id);  
      $('#sel_' + item.id).attr('checked', 'checked');
     }

                }
            };


function selectAllRows(bool) {
                var rows = [];
                selectedRowIds = [];

                for (var i = 0; i < dataView.rows.length; i++) {
                    rows.push(i);
                    if (bool) {
      selectedRowIds.push(dataView.rows[i].id);
      $('#sel_' + dataView.rows[i].id).attr('checked', 'checked');
     } else {
      rows = [];
      $('#sel_' + dataView.rows[i].id).attr('checked', '');
     }     
                }

                grid.setSelectedRows(rows);
   }

   grid.onKeyDown = function(e) {
                // select all rows on ctrl-a
    if (e.which != 65 || !e.ctrlKey)
                    return false;

    selectAllRows(true);

    return true;
            };

   $("#selectAll").click(function(e) { 
                Slick.GlobalEditorLock.cancelCurrentEdit();

    if ($('#selectAll').attr('checked'))
     selectAllRows(true);
    else
     selectAllRows(false);

    return true;
   });

谢谢!

I need to make a column where you can select grid rows with input:checkbox. Grids like ones used by Yahoo, Google etc have something like that.
I made something but I have some problems and I think that is not a good aproach also.

It's posible to have checkboxes in rows and click on them directly, not like in example4-model ?

My idea was :

    < div id="inlineFilterPanel" class="slick-header-column" style="padding: 3px 0; color:black;">
            <input type="checkbox" name="selectAll" id="selectAll" value="true" / >
   < input type="text" id="txtSearch2" value="Desktops" />
        </div>

d["check"] = '< INPUT type=checkbox value='true' name='selectedRows[]' id='sel_id_<?php echo $i; ?>' class='editor-checkbox' hideFocus />';

grid.onSelectedRowsChanged = function() {
                selectedRowIds = [];
    $('#myGrid' + ' :checkbox').attr('checked', '');
                var rows = grid.getSelectedRows();
                for (var i = 0, l = rows.length; i < l; i++) {
                    var item = dataView.rows[rows[i]];
                    if (item) {
      selectedRowIds.push(item.id);  
      $('#sel_' + item.id).attr('checked', 'checked');
     }

                }
            };


function selectAllRows(bool) {
                var rows = [];
                selectedRowIds = [];

                for (var i = 0; i < dataView.rows.length; i++) {
                    rows.push(i);
                    if (bool) {
      selectedRowIds.push(dataView.rows[i].id);
      $('#sel_' + dataView.rows[i].id).attr('checked', 'checked');
     } else {
      rows = [];
      $('#sel_' + dataView.rows[i].id).attr('checked', '');
     }     
                }

                grid.setSelectedRows(rows);
   }

   grid.onKeyDown = function(e) {
                // select all rows on ctrl-a
    if (e.which != 65 || !e.ctrlKey)
                    return false;

    selectAllRows(true);

    return true;
            };

   $("#selectAll").click(function(e) { 
                Slick.GlobalEditorLock.cancelCurrentEdit();

    if ($('#selectAll').attr('checked'))
     selectAllRows(true);
    else
     selectAllRows(false);

    return true;
   });

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

风筝有风,海豚有海 2024-10-11 10:57:59

我已将复选框选择列的示例实现添加到 http: //mleibman.github.com/SlickGrid/examples/example-checkbox-row-select.html

这是即将发布的 2.0 版本的一部分。

I've added a sample implementation of a checkbox select column to http://mleibman.github.com/SlickGrid/examples/example-checkbox-row-select.html

This is part of the upcoming 2.0 release.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文