Kendo UI和基因敲除(Rockout.js)rowTemplate排序 [英] Kendo UI and knockout.js rowTemplate sorting

问题描述

我有一个MVC网站，在这里我使用Kendo UI和kickout.js来显示页面.一种情况是通过$.getJSON从服务器获取数据库信息，然后在KendoUI网格上显示此信息.

I have a MVC site where I use Kendo UI and knockout.js to display the pages. One scenario is to get the database information from server through $.getJSON and then display this information on a KendoUI grid.

<div data-bind="kendoGrid:{sortable:true, data:users, rowTemplate:'userRowTemplate'}>
    <table>
        <thead>
            <tr>
                <th>Username</th>
                <th>First Name</th>
                <th>Last Name</th>                   
            </tr>
        </thead> </table>
</div>

<script type="text/html">
    <tr>
        <td data-bind="text: Username"></td>
        <td data-bind="text: FirstName"></td>
        <td data-bind="text: LastName"></td>            
    <tr>
</script>

和javascript:

and the javascript :

<script type="text/javascript">
    var ViewModel = function () {
        var self=this;
        self.users=ko.mapping.fromJS([]);
        $getJSON("/UserManagementController/GetUsers",function(data){
            ko.mapping.fromJS(data,{},self.users);
        });                 
    };

    $(document).ready(function(){
        var newViewModel=new ViewModel();
        ko.applyBindings(newViewModel);
    });    
</script>

我希望这些数据可以在特定的列上排序(例如，在这里指定的列)，但是我无法成功实现此目的.我已经尝试过此淘汰赛-kendo插件问题帖子中的解决方案，在简单对象上效果很好，但在可观察对象上效果不好.所以我的问题是:如何通过MVC控制器将数据库中的数据映射到可观察对象中，并将其显示在Kendo网格中，但仍然能够对它们进行排序?

I want this data to be sortable on specific columns (the ones specified here are for example's sake), but I haven't been able to achieve this successfully. I have tried the solution from this knockout-kendo plugin issue post, which works well on simple objects, but does not work on observables. So my question is : how to map data from database through MVC controller to observables in knockout and displaying them in a Kendo grid, but still be able to sort them?

谢谢， 亚历克斯·巴拉克

Thanks, Alex Barac

推荐答案

您可以通过创建JS视图模型来表示从服务器返回的数据，然后将数据映射到视图模型中来完成此任务.然后，您可以通过订阅匹配的可观察属性来实现排序，从而设置简单对象.

You can do this by creating a JS view model to represent the data coming back from the server, and mapping the data into the view model. Then you can have simple objects that get set by subscribing to the matching observable properties to implement the sort.

这里是一个示例: http://jsfiddle.net/R4Jys/1/

HTML:

<div data-bind="kendoGrid: gridOptions(myList)"></div>
<script id="rowTmpl" type="text/html">
    <tr>
        <td>
            <span data-bind="text: firstName" />
        </td>
        <td>
            <span data-bind="text: lastName" />
        </td>
        <td>
            <span data-bind="text: userName" />
        </td>
    </tr>
</script>

JavaScript:

JavaScript:

var gridItem = function () {
    var self = this;
    self.firstName = ko.observable();
    self.firstNameSort;
    self.firstName.subscribe(function (value) {
        self.firstNameSort = value;
    });
    self.lastName = ko.observable();
    self.lastNameSort;
    self.lastName.subscribe(function (value) {
        self.lastNameSort = value;
    });
    self.userName = ko.observable();
    self.userNameSort;
    self.userName.subscribe(function (value) {
        self.userNameSort = value;
    });
    self.other = ko.observable('test');
    return self;
};
var vm = function() {
    var self = this;
    self.myList = ko.observableArray();
    self.test = ko.observable();
    self.gridOptions = function (data) {
        return {
            data: data,
            rowTemplate: 'rowTmpl',
            useKOTemplates: true,
            scrollable: true,
            sortable: true,
            columns: [
                {
                    field: "firstNameSort",
                    title: "First Name",
                    width: 130
                },
                {
                    field: "lastNameSort",
                    title: "Last Name",
                    filterable: true
                },
                {
                    field: "userNameSort",
                    title: "Username"
                }
            ]
        }
    };
    var data = [{'firstName':'Steve', 'lastName':'Jones', 'userName': 'steve.jones'},
                {'firstName':'Janet', 'lastName':'Smith', 'userName': 'janet.smith'},
                {'firstName':'April', 'lastName':'Baker', 'userName': 'april.baker'},
                {'firstName':'Dave', 'lastName':'Lee', 'userName': 'dave.lee'},
                {'firstName':'Jack', 'lastName':'Bennet', 'userName': 'jack.bennet'},
                {'firstName':'Chris', 'lastName':'Carter', 'userName': 'chris.carter'}];
    self.myList(ko.utils.arrayMap(data, function(item) { 
        var g = new gridItem();
        ko.mapping.fromJS(item, {}, g);
        return g;
    }));
};
var pageVm = new vm();

ko.applyBindings(pageVm);

这篇关于Kendo UI和基因敲除(Rockout.js)rowTemplate排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！