jQuery的数据表不更新数据

时间：2018-10-29 02:18:10

标签： jquery knockout.js datatables

我正在尝试使用敲除js和jquery数据表在网格中显示数据。

一切正常，除了当我尝试用新数据刷新（单击“重画”按钮）网格时，我遇到问题，没有错误，但是网格不刷新。

有人可以帮助我解决问题吗？

同一笔的代码笔位于：CODE PEN 

ko.bindingHandlers.dataTable = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
		
		viewModel.SelectedC({name:"test1"});
        ko.applyBindingsToDescendants(bindingContext, $(el));
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var dt = $(el).DataTable(ko.toJS(valueAccessor()));
		dt.on( 'click', 'tr', function (e) {
				var clickedParentElement = $(e.originalEvent.target).parents()[0];
				var bContext = ko.contextFor(clickedParentElement).$data; 
				
				//ko.contextFor(clickedParentElement).$data.SelectedItem(ko.toJS((dt.row(this).data()))); 
				ko.contextFor(clickedParentElement).$data.SelectedC(dt.row(this).data());
				ko.applyBindingsToDescendants(ko.contextFor(clickedParentElement).$data, dt.row(this));
				} );
    }
}


    
var viewmodel = function (gridC) { 
	
	
    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 = null;
	self.Data = null;
	self.ColumnDefinitions = null;
	self.SelectedItem = null;
	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 = ko.observable('test1');

	this.SelectedC = ko.pureComputed({
        read: function () {
            return this.SelectedItem();
        },
        write: function (value) {
				
                this.SelectedItem(value);
                
            
        },
        owner: this
    });
	
	self.ColumnDefinitions.push(selectColumn);
	self.Order = ko.observableArray([]);
	self.Order = [[2,'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;
			
			my_item.title = '';
			
			}
			self.Columns.push(my_item);
	});
	
	var gridData;
	if(gridC != null)
		gridData = JSON.parse(gridC);
		else
		gridData = JSON.parse(gridConf.Data);
	self.initialData = ko.observableArray([]);
	self.initialData(gridData);
	self.GridData = ko.pureComputed({
        read: function () {
            return this.initialData();
        },
        write: function (value) {
				
                this.initialData(value);
                
            
        },
        owner: this
    });
	
	
};

function Redraw(){
		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\"          } ] "
      };
		//ko.cleanNode($('#lookupData'));
		
		if ($.fn.DataTable.isDataTable('#lookupData')) {
		var dt = $('#lookupData').DataTable();
		dt.clear();
		//dt.destroy(true);
		//$('#lookupData').empty();
		}
		var vm = new viewmodel(gridConf.Data);
		
		//dt.ajax.reload( null, false );
		//$('#lookupData').DataTable();
	
	
	}

var vm = new viewmodel()
ko.applyBindings(vm);
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }
	table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox
	{
		
		width:0!important;
		height:0!important;
		border: 0 !important;
	}
<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 id="lookupData" data-bind="dataTable: { scrollY: '200', destroy:true, scrollX: true, order:Order,  paging: true, select:Select,  dom:'t,p', columns:Columns, columnDefs:ColumnDefinitions, data:GridData, pagingType: 'full' }" class="stripe row-border order-column" cellspacing="0" width="100%">
</table>
<span data-bind="text: ko.toJS(SelectedC).name"></span>

<button id="btnRedrawGrid" data-bind="click:Redraw">Redraw</button>

1 个答案:

答案 0 :(得分：1)

您做错了几件事。

  1. Redraw函数必须是视图模型的一部分，否则将不会发生绑定，并且单击按钮将无济于事。
  2. Knockout的想法是一次绑定一个视图模型，并根据需要多次更改值。因此，initialData函数不应再次创建视图模型的新实例。取而代之的是，只需更新self.GridData，因为initialData是pureComputed可观察的，它依赖于ko.bindingHandlers.dataTable = { init: function (el, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { viewModel.SelectedC({name:"test1"}); ko.applyBindingsToDescendants(bindingContext, $(el)); }, update: function (el, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var dt = $(el).DataTable(ko.toJS(valueAccessor())); dt.on( 'click', 'tr', function (e) { var clickedParentElement = $(e.originalEvent.target).parents()[0]; var bContext = ko.contextFor(clickedParentElement).$data; //ko.contextFor(clickedParentElement).$data.SelectedItem(ko.toJS((dt.row(this).data()))); ko.contextFor(clickedParentElement).$data.SelectedC(dt.row(this).data()); ko.applyBindingsToDescendants(ko.contextFor(clickedParentElement).$data, dt.row(this)); } ); } } var viewmodel = function (gridC) { 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 = null; self.Data = null; self.ColumnDefinitions = null; self.SelectedItem = null; 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 = ko.observable('test1'); this.SelectedC = ko.pureComputed({ read: function () { return this.SelectedItem(); }, write: function (value) { this.SelectedItem(value); }, owner: this }); self.ColumnDefinitions.push(selectColumn); self.Order = ko.observableArray([]); self.Order = [[2,'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; my_item.title = ''; } self.Columns.push(my_item); }); var gridData; if(gridC != null) gridData = JSON.parse(gridC); else gridData = JSON.parse(gridConf.Data); self.initialData = ko.observableArray([]); self.initialData(gridData); self.GridData = ko.pureComputed({ read: function () { return this.initialData(); }, write: function (value) { this.initialData(value); }, owner: this }); self.Redraw = 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\" } ] " }; //ko.cleanNode($('#lookupData')); if ($.fn.DataTable.isDataTable('#lookupData')) { var dt = $('#lookupData').DataTable(); dt.clear(); //dt.destroy(true); //$('#lookupData').empty(); } self.initialData(gridData); // var vm = new viewmodel(gridConf.Data); //dt.ajax.reload( null, false ); //$('#lookupData').DataTable(); } }; var vm = new viewmodel() ko.applyBindings(vm);

这是更正后的JS：

 inner class MovieViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {


 val addtocart = itemView.findViewById<Button>(R.id.viewprofile)


         addtocart!!.setOnClickListener {
                      }}
相关问题
最新问题