javascript - 无法单击表格头元素

Question

我尝试使用以下 jsfiddle 中的 knockout 过滤器和排序功能:http://jsfiddle.net/rrahlf/EZUEF/6/

排序效果很好，但我的表格标题不可“单击”。谁能告诉我为什么吗？

这是我的index.cshtml

@model PagedList.IPagedList<TVS.ESB.BamPortal.Website.Models.LookupViewModel>
@using System.Web.Script.Serialization
@{
    ViewBag.Title = "Cross Ref";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@ViewBag.Title</h2>
@{  string data = new JavaScriptSerializer().Serialize(Model); }

<div id="CrossRefDiv">

    <p>Number of rows <span data-bind="text: lookups().length"> </span></p>

    <div data-bind="foreach: filters">
        <input type="button" data-bind="click: $parent.setActiveFilter, value: title" />
    </div>

    <table class="table table-striped">
        <thead>
            <tr data-bind="foreach: headers">
                <th data-bind="click: $parent.sort, text: title"></th>
            </tr>
        </thead>
        <tbody data-bind="template: { name: 'rowTemplate', foreach: filteredLookups }"></tbody>
    </table>

    <form data-bind="submit: save">
        <button data-bind="click: addRow">Add Row</button>
        <button data-bind="enable: lookups().length > 0" type="submit">Submit</button>
    </form>

    <script type="text/html" id="rowTemplate">
        <tr>
            <td><input data-bind="value: SourceSystem" /></td>
            <td><input data-bind="value: SourceField" /></td>
            <td><input data-bind="value: SourceValue" /></td>
            <td><input data-bind="value: TargetSystem" /></td>
            <td><input data-bind="value: TargetValue" /></td>
            <td><a href="#" data-bind="click: function() { vm.removeRow($data) }">Delete</a></td>
        </tr>
    </script>

</div>

@section Scripts {
    <script src="~/KnockoutVM/CrossRef.js"></script>

    <script type="text/javascript">
        var vm = new ViewModel(@Html.Raw(data));
        ko.applyBindings(vm, document.getElementById("CrossRefDiv"));
    </script>
}

还有我的 CrossRef.js:

function ViewModel(data) {
    var self = this;

    //remove 1st element from array because this holds filter data which the filter Partial view 
    //will have already dealth with
    data.splice(0, 1);
    self.lookups = ko.observableArray(data);

    //start of filter & sort
    self.headers = [
        { title: 'Source System', sortPropertyName: 'sourceSystem', asc: true, active: false },
        { title: 'Source Field', sortPropertyName: 'sourceField', asc: true, active: false },
        { title: 'Source Value', sortPropertyName: 'sourceValue', asc: true, active: false },
        { title: 'Target System', sortPropertyName: 'targetSystem', asc: true, active: false },
        { title: 'Target Value', sortPropertyName: 'targetValue', asc: true, active: false }
];
    self.filters = [
        { title: 'Show All', filter: null },
        { title: 'SCIP', filter: function (item) { return item.sourceSystem == 'SCIP'; } },
        { title: 'CCE', filter: function (item) { return item.sourceSystem == 'CCE'; } }
    ];

    self.activeSort = ko.observable(function () { return 0; }); //set the default sort
    self.sort = function (header, event) {
        //if this header was just clicked a second time
        if (header.active) {
            header.asc = !header.asc; //toggle the direction of the sort
        }
        //make sure all other headers are set to inactive
        ko.utils.arrayForEach(self.headers, function (item) { item.active = false; });
        //the header that was just clicked is now active
        header.active = true;//our now-active header

        var prop = header.sortPropertyName;
        var ascSort = function (a, b) { return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
        var descSort = function (a, b) { return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
        var sortFunc = header.asc ? ascSort : descSort;

        //store the new active sort function
        self.activeSort(sortFunc);
    };

    self.activeFilter = ko.observable(self.filters[0].filter);//set a default filter    
    self.setActiveFilter = function (model, event) {
        self.activeFilter(model.filter);
    };

    self.filteredLookups = ko.computed(function () {
        var result;
        if (self.activeFilter()) {
            result = ko.utils.arrayFilter(self.lookups(), self.activeFilter());
        } else {
            result = self.lookups();
        }
        return result.sort(self.activeSort());
    });
    //end of filter & sort

    self.removeRow = function (row) {
        this.lookups.remove(row);
    }

    self.addRow = function () {
        this.lookups.push({ SourceSystem: "", SourceField: "", SourceValue: "", TargetSystem: "", TargetField: "", TargetValue: "" });
    }

    self.save = function () {
        var data = ko.toJS(this.lookups);


        $.ajax({
            type: "POST",
            url: location.href,
            data: ko.toJSON(data),
            contentType: 'application/json',
            async: true
        });
    }



}

Answer 1

我不太确定这是否是您所说的“可点击”的意思，但这里是您提供的一个修改过的 fiddle ，它将一个类添加到当前单击的表标题中(当前单击的类是粗体的，然后其他是粗体的)正常)。

fiddle here .

我在这里所做的是在CSS中将第th字体粗细设置为正常，并添加一个名为current的类，该类提供粗体字体粗细。

th{        
   cursor:pointer; 
   font-weight: normal;   
}    
.current{ 
    font-weight: bold;
}

然后将标题项的 active 属性设置为可观察对象。

self.headers = [
  {title:'First Name',sortPropertyName:'firstName', asc: true, active: ko.observable(false)},
  {title:'Last Name',sortPropertyName:'lastName', asc: true, active: ko.observable(false)},
  {title:'Age',sortPropertyName:'age', asc: true, active: ko.observable(false)}
];

然后修改排序函数，以便将 active 视为可观察对象。

self.sort = function(header, event){
    //if this header was just clicked a second time
    if(header.active()) {
        header.asc = !header.asc; //toggle the direction of the sort
    }
    //make sure all other headers are set to inactive
    ko.utils.arrayForEach(self.headers, function(item){ item.active(false); } );
    //the header that was just clicked is now active
    header.active(true);//our now-active header

    var prop = header.sortPropertyName;
    var ascSort = function(a,b){ return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
    var descSort = function(a,b){ return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
    var sortFunc = header.asc ? ascSort : descSort;

    //store the new active sort function
    self.activeSort(sortFunc);
};

最后在第 th 中添加了 css 绑定(bind)。

 <th data-bind="click: $parent.sort, text: title, css: {current: active}"></th>

您还可以在表头中添加一个标识符(如果它是升序或降序)，只需相同的步骤，添加一个 css 类并使 asc 成为可观察的。