2

データのリストでブートストラップのテーブル クラス (特に class="table table-hover") を使用しています (単一ページ アプリケーションでデータ バインディングにノックアウトを使用)-

                    <table id="tblAllCert" border="0" class="table table-hover" width="100%">
                        <tbody  data-bind="foreach: allCertificates">
                        <tr id="AllCertRow" style="cursor: pointer" data-bind="a: console.log($data), click: $parent.selectThing, css: { 'highlight': $parent.isSelected() == $data }  ">
                            <td>

                                <b><span data-bind="    text: clientName"></span>&nbsp;(<span data-bind="    text: clientNumber"></span>)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-bind="    text: borrowBaseCount"></span>&nbsp;Loan(s)&nbsp;</b>
                                Collateral Analyst:&nbsp;<span data-bind="    text: userName"></span>

                                Certificate:&nbsp;<span data-bind="text: lwCertID"></span>&nbsp;&nbsp;Request&nbsp;Date:&nbsp;<span data-bind="    text: moment(requestDate).format('DD/MMM/YYYY')"></span>
                            </td>
                             <td data-bind="text: $parent.isSelected"></td>
                        </tr>
                        </tbody>
                    </table>


1. ユーザーが行をクリックすると、class="highlight" を実装する必要があります (クリックした行を強調表示します) 。
2. ユーザーが別の行をクリックすると、最初の行のハイライト クラスが削除され、新しく選択された行に class="highlight" が適用されます。最初の行をブートストラップ テーブル クラス (class="table table-hover") の元の色に戻します。

つまり、クリックされた行のみが強調表示されます。他の行は、ブートストラップの class="table table-hover" の特性を保持する必要があります。アイデア？

EDIT 7/23/2013 フィドル: http://jsfiddle.net/wood0615/5BKt6/ - (ノックアウトコード)-

 define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService'],
function (logger, system, router, CertificateDataService) {
    var allCertificates = ko.observableArray([]);
    var myCertificates = ko.observableArray([]);
    //var serverSelectedOptionID = ko.observableArray();
    var isSelected = ko.observable();
    var serverSelectedOptionID = ko.observable();
    var CurrentDisplayThing = ko.observable(allCertificates);
  var serverOptions = [
    { id: 1, name: 'Certificate', OptionText: 'lwCertID' },
    { id: 2, name: 'Client Name', OptionText: 'clientName' },
    { id: 3, name: 'Client Number', OptionText: 'clientNumber' },
    { id: 4, name: 'Request Date', OptionText: 'requestDate' },
    { id: 5, name: 'Collateral Analyst', OptionText: 'userName' }
    ];

    var activate = function () {


        // go get local data, if we have it
        return SelectAllCerts(), SelectMyCerts();

    };


    var vm = {
        activate: activate,
        allCertificates: allCertificates,
        myCertificates: myCertificates,
        title: 'Certificate Approvals',
        SelectMyCerts: SelectMyCerts,
        SelectAllCerts: SelectAllCerts,
        theOptionId: ko.observable(1),
        serverOptions: serverOptions,
        serverSelectedOptionID: serverSelectedOptionID,
        SortUpDownAllCerts: SortUpDownAllCerts,
        isSelected: ko.observable(),
          selectThing: function(row, event) {
             isSelected(row.lwCertID);

            }

    };


    serverSelectedOptionID.subscribe(function () {
        var sortCriteriaID = serverSelectedOptionID();
        allCertificates.sort(function (a, b) {
            var fieldname = serverOptions[sortCriteriaID - 1].OptionText;

            if (a[fieldname] == b[fieldname]) {
                return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;
            }

            return a[fieldname] > b[fieldname] ? 1 : -1;

        });

    });

    allCertificates.valueHasMutated();
    return vm;

    ////////////





















    function SortUpDownAllCerts() {
        allCertificates.sort();
        allCertificates.valueHasMutated();
    }

    function SortUpDownMyCerts() {
        return allCertificates.sort()
    }


    function SelectAllCerts() {
        return CertificateDataService.getallCertificates(allCertificates);
    }

    function SelectMyCerts() {
        return CertificateDataService.getMyCertificates(myCertificates);
    }

    //function RowSelected() {
    //    $('#tblAllCert tr').on('click', function (event) {
    //        $(this).addClass('highlight').siblings().removeClass('highlight');
    //    });
    //    $("#tblAllCert tr").addClass("highlight");
    //    $('#tblAllCert tr').css('background-color: Red');
    //}

});
4

3 に答える 3

2 
$('table').on('click','tr',function(e){
  $('table').find('tr.highlight').removeClass('highlight');
  $(this).addClass('highlight');
})

http://jsfiddle.net/XKjGJ/

于 2013-07-21T18:44:31.443 に答える
1

ビューのデータバインディングを次のように変更することで、最終的に機能するようになりました-

 <tr id="AllCertRow" style="cursor: pointer" data-bind="click: $parent.selectThing, css: { highlight: $parent.isSelected() == $data.lwCertID }">

私が見逃していたキーは、css バインディングのブール値の比較でした。私の投稿に返信してくれた人に感謝します。

于 2013-07-24T11:54:36.873 に答える
0 
var vm = function() {


            var self=this;
            self.isSelected = ko.observable(false);

            self.selectThing = function (row, event) {

                self.isSelected(true);
            }.bind(this);

これにより、選択時に行の色が変わります。

ロジックをプラグインして、1 行だけが選択されるようにします。親プロパティであり、すべての行がこの親レベルのプロパティにバインドされるため、これですべての行が選択されます。

これは正確な解決策ではありませんが、KO をいじるのに役立ちます。

于 2013-07-24T10:06:49.913 に答える