knockoutjs 繫結物件到列表中 並用checkbox選擇 返回資料
阿新 • • 發佈:2019-01-07
今天一個操作是先要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使用方法就好。