1. 程式人生 > >knockoutjs 繫結物件到列表中 並用checkbox選擇 返回資料

knockoutjs 繫結物件到列表中 並用checkbox選擇 返回資料

今天一個操作是先要ajax返回列表中的json資料,然後繫結到一個table列表中,table首列是一個checkbox控制器,可以多選多個數據物件,然後返回結果

html程式碼:

	<div class="container">
		<div class="row cl">
			<div class="col-sm-12">
				<table class="table table-bg table-border table-bordered">
					<thead>
						<tr>
							<th></th>
							<th>欄位名</th>
							<th>資料型別</th>
							<th>註釋</th>
						</tr>
					</thead>
					<tbody data-bind="foreach: list">
						<tr>
							<td> <input type="checkbox" data-bind="checkedValue:$data, checked: $parent.chosenData" /> </td>
							<td data-bind="text:field"></td>
							<td data-bind="text:type"></td>
							<td data-bind="text:comment"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		
		<div class="row cl mt-5">
			<div class="col-sm-1">
				<a class="btn btn-success" data-bind="visible:tableViewModel.chosenData().length > 0, click:choosed">選擇好了</a>
			</div>
		</div>
	</div>

js程式碼:
	var table_name = '{$table_name}';
	var data = []; 
	var viewModel= function(){
		this.addChosen = function(data){
			this.chosenData.push(data);
		};
	    
	    this.choosed = function(){
	    	jsonData = ko.toJSON(this.chosenData);
	    	console.log(jsonData);
	    	//closeWin(jsonData);
	    };
	};
	
	viewModel.prototype = {
		list : ko.observableArray(data),
		chosenData : ko.observableArray(),
	};
	
	
	var tableViewModel = new viewModel();
	ko.applyBindings(tableViewModel);

	$(function(){
		if(table_name !== null && table_name !== undefined && table_name !== '')
		{
			$.ajax({
				type:"post",
				data:{
					table_name:table_name
				},
				url:"{:url('home/project/getTableColumns')}",
				async:true,
				success: function(res){
					tableViewModel.list(res);
				}
			},'json');
		}
		
		
	});

註釋:

我先做一個 viewModel的物件,這個物件是一個函式操作類,包括一個addChosen和一個chosed的函式,然後用prototype 屬性來向物件新增屬性,添加了一個list和choseData的屬性,然後給checkbox控制元件繫結:checkedValue:$data, checked: $parent.chosenData,大致意思是checkbox的值是list中的每一個的物件,當checked的時候,資料繫結到chosenData這個屬性,勾上了就新增到這個數組裡面,取消勾選的話自動從數組裡面去除掉。

今天學會了js的這個prototype屬性向物件新增屬性的功能。

js新手,寫的js程式碼不咋的,勿噴。學習這個demo使用方法就好。