有人可以帮助我使用淘汰赛js从数据表中检索选定的行数据吗？
当前我正在使用datatables和datatables select插件，但是问题是如何检索所选行的数据并用所选行-名称列填充范围“”？
到目前为止，网格已渲染，选择工作正常。如果我对某行进行了选择，则无法填充视图模型，但是我不确定这是否是正确的方法。
ko.bindingHandlers.dataTable = {
update: function(el, valueAccessor, allBindingsAccessor, viewModel) {
$(el).DataTable(ko.toJS(valueAccessor()));
}
}
var viewmodel = function() {
var gridConf = {
"Columns": "[{\"displayName\":\"Id\",\"field\":\"id\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":false},{\"displayName\":\"Name\",\"field\":\"name\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Position\",\"field\":\"position\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Office\",\"field\":\"office\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Extn\",\"field\":\"extn\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"StartDate\",\"field\":\"start_date\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Salary\",\"field\":\"salary\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true}]",
"Data": "[{ \"id\": \"1\", \"name\": \"Tiger Nixon\", \"position\": \"System Architect\", \"salary\": \"$320,800\", \"start_date\": \"2011/04/25\", \"office\": \"Edinburgh\", \"extn\": \"5421\" }, { \"id\":\"2\", \"name\": \"Garrett Winters\", \"position\": \"Accountant\", \"salary\": \"$170,750\", \"start_date\": \"2011/07/25\", \"office\": \"Tokyo\", \"extn\": \"8422\" }, { \"id\": \"3\", \"name\": \"Ashton Cox\", \"position\": \"Junior Technical Author\", \"salary\": \"$86,000\", \"start_date\": \"2009/01/12\", \"office\": \"San Francisco\", \"extn\": \"1562\" }, { \"id\": \"4\", \"name\": \"Cedric Kelly\", \"position\": \"Senior Javascript Developer\", \"salary\": \"$433,060\", \"start_date\": \"2012/03/29\", \"office\": \"Edinburgh\", \"extn\": \"6224\" }, { \"id\": \"5\", \"name\": \"Airi Satou\", \"position\": \"Accountant\", \"salary\": \"$162,700\", \"start_date\": \"2008/11/28\", \"office\": \"Tokyo\", \"extn\": \"5407\" }, { \"id\": \"6\", \"name\": \"BrielleWilliamson\", \"position\": \"Integration Specialist\", \"salary\": \"$372,000\", \"start_date\": \"2012/12/02\", \"office\": \"New York\", \"extn\": \"4804\" }, { \"id\": \"7\", \"name\":\"Herrod Chandler\", \"position\": \"Sales Assistant\", \"salary\": \"$137,500\", \"start_date\": \"2012/08/06\", \"office\": \"San Francisco\", \"extn\": \"9608\" }, { \"id\": \"8\", \"name\":\"Rhona Davidson\", \"position\": \"Integration Specialist\", \"salary\": \"$327,900\", \"start_date\": \"2010/10/14\", \"office\": \"Tokyo\", \"extn\": \"6200\" }, { \"id\": \"9\", \"name\":\"Colleen Hurst\", \"position\": \"Javascript Developer\", \"salary\": \"$205,500\", \"start_date\": \"2009/09/15\", \"office\": \"San Francisco\", \"extn\": \"2360\" }, { \"id\": \"10\", \"name\": \"Sonya Frost\", \"position\": \"Software Engineer\", \"salary\": \"$103,600\", \"start_date\": \"2008/12/13\", \"office\": \"Edinburgh\", \"extn\": \"1667\" }, { \"id\": \"11\", \"name\":\"Jena Gaines\", \"position\": \"Office Manager\", \"salary\": \"$90,560\", \"start_date\": \"2008/12/19\", \"office\": \"London\", \"extn\": \"3814\" }, { \"id\": \"12\", \"name\": \"QuinnFlynn\", \"position\": \"Support Lead\", \"salary\": \"$342,000\", \"start_date\": \"2013/03/03\", \"office\": \"Edinburgh\", \"extn\": \"9497\" }, { \"id\": \"13\", \"name\": \"ChardeMarshall\", \"position\": \"Regional Director\", \"salary\": \"$470,600\", \"start_date\": \"2008/10/16\", \"office\": \"San Francisco\", \"extn\": \"6741\" }, { \"id\": \"14\", \"name\": \"HaleyKennedy\", \"position\": \"Senior Marketing Designer\", \"salary\": \"$313,500\", \"start_date\": \"2012/12/18\", \"office\": \"London\", \"extn\": \"3597\" }, { \"id\": \"15\", \"name\":\"TatyanaFitzpatrick\", \"position\": \"Regional Director\", \"salary\": \"$385,750\", \"start_date\": \"2010/03/17\", \"office\": \"London\", \"extn\": \"1965\" }, { \"id\": \"16\", \"name\":\"Michael Silva\", \"position\": \"Marketing Designer\", \"salary\": \"$198,500\", \"start_date\": \"2012/11/27\", \"office\": \"London\", \"extn\": \"1581\" }, { \"id\": \"17\", \"name\":\"PaulByrd\", \"position\": \"Chief Financial Officer (CFO)\", \"salary\": \"$725,000\", \"start_date\": \"2010/06/09\", \"office\": \"New York\", \"extn\": \"3059\" }, { \"id\": \"18\", \"name\": \"Gloria Little\", \"position\": \"Systems Administrator\", \"salary\": \"$237,500\", \"start_date\": \"2009/04/10\", \"office\": \"New York\", \"extn\": \"1721\" }, { \"id\": \"19\", \"name\":\"Bradley Greer\", \"position\": \"Software Engineer\", \"salary\": \"$132,000\", \"start_date\": \"2012/10/13\", \"office\": \"London\", \"extn\": \"2558\" }, { \"id\": \"20\", \"name\": \"DaiRios\", \"position\": \"Personnel Lead\", \"salary\": \"$217,500\", \"start_date\": \"2012/09/26\", \"office\": \"Edinburgh\", \"extn\": \"2290\" }, { \"id\": \"21\", \"name\": \"JenetteCaldwell\", \"position\": \"Development Lead\", \"salary\": \"$345,000\", \"start_date\": \"2011/09/03\", \"office\": \"New York\", \"extn\": \"1937\" }, { \"id\": \"22\", \"name\": \"YuriBerry\", \"position\": \"Chief Marketing Officer (CMO)\", \"salary\": \"$675,000\", \"start_date\": \"2009/06/25\", \"office\": \"New York\", \"extn\": \"6154\" }, { \"id\": \"23\", \"name\":\"Caesar Vance\", \"position\": \"Pre-Sales Support\", \"salary\": \"$106,450\", \"start_date\": \"2011/12/12\", \"office\": \"New York\", \"extn\": \"8330\" }, { \"id\": \"24\", \"name\":\"Doris Wilder\", \"position\": \"Sales Assistant\", \"salary\": \"$85,600\", \"start_date\": \"2010/09/20\", \"office\": \"Sidney\", \"extn\": \"3023\" }, { \"id\": \"25\", \"name\": \"AngelicaRamos\", \"position\": \"Chief Executive Officer (CEO)\", \"salary\": \"$1,200,000\", \"start_date\": \"2009/10/09\", \"office\": \"London\", \"extn\": \"5797\" }, { \"id\": \"26\", \"name\":\"Gavin Joyce\", \"position\": \"Developer\", \"salary\": \"$92,575\", \"start_date\": \"2010/12/22\", \"office\": \"Edinburgh\", \"extn\": \"8822\" }, { \"id\": \"27\", \"name\": \"JenniferChang\", \"position\": \"Regional Director\", \"salary\": \"$357,650\", \"start_date\": \"2010/11/14\", \"office\": \"Singapore\", \"extn\": \"9239\" }, { \"id\": \"28\", \"name\": \"BrendenWagner\", \"position\": \"Software Engineer\", \"salary\": \"$206,850\", \"start_date\": \"2011/06/07\", \"office\": \"San Francisco\", \"extn\": \"1314\" }, { \"id\": \"29\", \"name\": \"FionaGreen\", \"position\": \"Chief Operating Officer (COO)\", \"salary\": \"$850,000\", \"start_date\": \"2010/03/11\", \"office\": \"San Francisco\", \"extn\": \"2947\" }, { \"id\": \"30\", \"name\":\"Shou Itou\", \"position\": \"Regional Marketing\", \"salary\": \"$163,000\", \"start_date\": \"2011/08/14\", \"office\": \"Tokyo\", \"extn\": \"8899\" }, { \"id\": \"31\", \"name\": \"MichelleHouse\", \"position\": \"Integration Specialist\", \"salary\": \"$95,400\", \"start_date\": \"2011/06/02\", \"office\": \"Sidney\", \"extn\": \"2769\" }, { \"id\": \"32\", \"name\": \"SukiBurks\", \"position\": \"Developer\", \"salary\": \"$114,500\", \"start_date\": \"2009/10/22\", \"office\": \"London\", \"extn\": \"6832\" }, { \"id\": \"33\", \"name\": \"PrescottBartlett\", \"position\": \"Technical Author\", \"salary\": \"$145,000\", \"start_date\": \"2011/05/07\", \"office\": \"London\", \"extn\": \"3606\" }, { \"id\": \"34\", \"name\": \"Gavin Cortez\", \"position\":\"Team Leader\", \"salary\": \"$235,500\", \"start_date\": \"2008/10/26\", \"office\": \"San Francisco\", \"extn\": \"2860\" }, { \"id\": \"35\", \"name\": \"Martena Mccray\", \"position\":\"Post-Sales support\", \"salary\": \"$324,050\", \"start_date\": \"2011/03/09\", \"office\": \"Edinburgh\", \"extn\": \"8240\" }, { \"id\": \"36\", \"name\": \"Unity Butler\", \"position\":\"Marketing Designer\", \"salary\": \"$85,675\", \"start_date\": \"2009/12/09\", \"office\": \"San Francisco\", \"extn\": \"5384\" }, { \"id\": \"37\", \"name\": \"Howard Hatfield\", \"position\": \"Office Manager\", \"salary\": \"$164,500\", \"start_date\": \"2008/12/16\", \"office\": \"San Francisco\", \"extn\": \"7031\" }, { \"id\": \"38\", \"name\": \"Hope Fuentes\", \"position\":\"Secretary\", \"salary\": \"$109,850\", \"start_date\": \"2010/02/12\", \"office\": \"San Francisco\", \"extn\": \"6318\" }, { \"id\": \"39\", \"name\": \"Vivian Harrell\", \"position\":\"Financial Controller\", \"salary\": \"$452,500\", \"start_date\": \"2009/02/14\", \"office\": \"San Francisco\", \"extn\": \"9422\" }, { \"id\": \"40\", \"name\": \"Timothy Mooney\", \"position\": \"Office Manager\", \"salary\": \"$136,200\", \"start_date\": \"2008/12/11\", \"office\": \"London\", \"extn\": \"7580\" }, { \"id\": \"41\", \"name\": \"Jackson Bradshaw\", \"position\":\"Director\", \"salary\": \"$645,750\", \"start_date\": \"2008/09/26\", \"office\": \"New York\", \"extn\": \"1042\" }, { \"id\": \"42\", \"name\": \"Olivia Liang\", \"position\": \"SupportEngineer\", \"salary\":\"$234,500\", \"start_date\": \"2011/02/03\", \"office\": \"Singapore\", \"extn\": \"2120\" }, { \"id\": \"43\", \"name\": \"Bruno Nash\", \"position\": \"SoftwareEngineer\", \"salary\": \"$163,500\", \"start_date\": \"2011/05/03\", \"office\": \"London\", \"extn\": \"6222\" }, { \"id\": \"44\", \"name\": \"Sakura Yamamoto\", \"position\": \"SupportEngineer\", \"salary\": \"$139,575\", \"start_date\": \"2009/08/19\", \"office\": \"Tokyo\", \"extn\": \"9383\" }, { \"id\": \"45\", \"name\": \"Thor Walton\", \"position\": \"Developer\", \"salary\": \"$98,540\", \"start_date\": \"2013/08/11\", \"office\": \"New York\", \"extn\": \"8327\" }, { \"id\": \"46\", \"name\": \"Finn Camacho\", \"position\": \"Support Engineer\", \"salary\":\"$87,500\", \"start_date\": \"2009/07/07\", \"office\": \"San Francisco\", \"extn\": \"2927\" }, { \"id\": \"47\", \"name\": \"Serge Baldwin\", \"position\": \"Data Coordinator\", \"salary\":\"$138,575\", \"start_date\": \"2012/04/09\", \"office\": \"Singapore\", \"extn\": \"8352\" }, { \"id\": \"48\", \"name\": \"Zenaida Frank\", \"position\": \"Software Engineer\", \"salary\":\"$125,250\", \"start_date\": \"2010/01/04\", \"office\": \"New York\", \"extn\": \"7439\" }, { \"id\": \"49\", \"name\": \"Zorita Serrano\", \"position\": \"Software Engineer\", \"salary\":\"$115,000\", \"start_date\": \"2012/06/01\", \"office\": \"San Francisco\", \"extn\": \"4389\" }, { \"id\": \"50\", \"name\": \"Jennifer Acosta\", \"position\": \"Junior JavascriptDeveloper\", \"salary\": \"$75,650\", \"start_date\": \"2013/02/01\", \"office\": \"Edinburgh\", \"extn\": \"3431\" }, { \"id\": \"51\", \"name\": \"Cara Stevens\", \"position\": \"SalesAssistant\", \"salary\": \"$145,600\", \"start_date\": \"2011/12/06\", \"office\": \"New York\", \"extn\": \"3990\" }, { \"id\": \"52\", \"name\": \"Hermione Butler\", \"position\": \"RegionalDirector\", \"salary\": \"$356,250\", \"start_date\": \"2011/03/21\", \"office\": \"London\", \"extn\": \"1016\" }, { \"id\": \"53\", \"name\": \"Lael Greer\", \"position\": \"SystemsAdministrator\", \"salary\": \"$103,500\", \"start_date\": \"2009/02/27\", \"office\": \"London\", \"extn\": \"6733\" }, { \"id\": \"54\", \"name\": \"Jonas Alexander\", \"position\":\"Developer\", \"salary\": \"$86,500\", \"start_date\": \"2010/07/14\", \"office\": \"San Francisco\", \"extn\": \"8196\" }, { \"id\": \"55\", \"name\": \"Shad Decker\", \"position\":\"Regional Director\", \"salary\": \"$183,000\", \"start_date\": \"2008/11/13\", \"office\": \"Edinburgh\", \"extn\": \"6373\" }, { \"id\": \"56\", \"name\": \"Michael Bruce\", \"position\":\"Javascript Developer\", \"salary\": \"$183,000\", \"start_date\": \"2011/06/27\", \"office\": \"Singapore\", \"extn\": \"5384\" }, { \"id\": \"57\", \"name\": \"Donna Snider\", \"position\": \"Customer Support\", \"salary\": \"$112,000\", \"start_date\": \"2011/01/25\", \"office\": \"New York\", \"extn\": \"4226\" } ] "
};
var self = this;
self.GridConfiguration = ko.observable();
self.Columns = ko.observableArray([]);
self.ColumnDefinitions = ko.observableArray([]);
var selectColumn = {};
selectColumn.targets = 0;
selectColumn.data = null;
selectColumn.orderable = false;
selectColumn.className = 'select-checkbox';
selectColumn.data = null;
self.SelectedItem = {};
self.SelectedItem = ko.observable();
self.SelectedItem = $('.selected').data();
self.ColumnDefinitions.push(selectColumn);
self.Order = ko.observableArray([]);
self.Order = [
[1, 'asc']
];
self.Select = ko.observable();
self.Select = {
style: 'single'
};
self.Columns.push({
data: null,
title: "",
searchable: false,
visible: true,
orderable: false,
defaultContent: ''
});
var columns = JSON.parse(gridConf.Columns);
$.each(columns, function(key, value) {
var my_item = {};
my_item.data = value['field'];
my_item.title = value['displayName'];
my_item.visible = value['visible'];
if (value['visible'] === false) {
my_item.searchable = false;
}
self.Columns.push(my_item);
});
var gridData = JSON.parse(gridConf.Data);
self.Data = ko.observableArray([]);
self.Data = gridData;
};
var vm = new viewmodel()
ko.applyBindings(vm);<link href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table data-bind="dataTable: { deferRender: true, scrollY: '200', scrollX: true, paging: true, select:Select, dom:'t,p', columns:Columns, columnDefs:ColumnDefinitions, data:Data, pagingType: 'full' }" class="stripe row-border order-column" cellspacing="0"
width="100%">
</table>
<p>
<span data-bind="selectedItem"></span>
</p>
答案 0 :(得分：0)
使用（）而不是=分配任何可观察到的东西。如果您使用=，它将不再可见。
self.Select = ko.observable();
self.Select({style: 'single'});