knockoutjs 绑定对象到列表中并用checkbox选择返回数据

最新推荐文章于 2024-07-12 16:15:03 发布

番兄

最新推荐文章于 2024-07-12 16:15:03 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： knockoutjs 前端文章标签： knockoutjs 前端

本文链接：https://blog.youkuaiyun.com/panxiong91/article/details/52238827

knockoutjs 同时被 2 个专栏收录

5 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

本文介绍了如何通过knockoutjs将AJAX获取的JSON数据绑定到表格，并实现多选功能。利用checkbox和viewModel，当checkbox被选中时，对象会被添加到一个数组中，取消选中则自动移除。文章强调了js的prototype属性在对象扩展中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天一个操作是先要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使用方法就好。