首页 文章

如何动态设置Wijmo Grid中的列冻结?

提问于
浏览
1

我可以通过添加硬编码索引值来设置静态行或列索引,但如果用户想要选择列,我们如何使用knockout js来完成 . 目前我已经设置了静态列索引,但我希望用户能够选择要冻结的列 .

var viewModel= function () {
        var self = this;           
        self.data = ko.observableArray([]);            
        self.recordCount = ko.observable(0);
        self.lowTotNoOfRec = ko.observable(0);
        self.pageSize = ko.observable(10);
        self.pageIndex = ko.observable(0);          
        self.paged = function (e, data) {
            self.pageIndex(data.newPageIndex);
        };
        self.staticColumnIndex = -1;

} .

1 回答

  • 2

    假设您创建了一个自定义绑定处理程序来设置网格:

    <table data-bind="wijgrid:gridConfig"></table>
    

    并且您的 gridConfig 包含 staticColumnIndex 的可观察量:

    self.gridConfig = {
        //...other configuration stuff...
        staticColumnIndex: ko.observable(-1)
    };
    

    然后,自定义绑定处理程序的 init 可以订阅 staticColumnIndex 上的更改并更新网格的值:

    ko.bindingHandlers.wijgrid = {
        init: function (element, valueAccessor, allBindingsAccessor, data, context) {
            var options = valueAccessor() || {};
            var grid = $(element).wijgrid({
                cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
                allowPaging: true,
                pageSize: options.pageSize(),
                data: options.data(),
                columns: options.headers,
                scrollMode: "auto"
            });
            options.staticColumnIndex.subscribe(function (newValue) {
                grid.wijgrid({
                    staticColumnIndex: newValue
                });
            });
        }
    };
    

    演示:http://jsfiddle.net/pvo4mk3c/

    PS:看起来一旦你在图表上有一个冻结列指示器,就可以来回拖动它 . 我的演示中的变化不会影响observable .

相关问题