目标
使用ajax获取到json数据后，通过ko绑定到表格，然后通过jquery.gridgroup插件实现行合并，效果如下：
步骤
1.引入插件
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/knockout-3.4.0.debug.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/jquery.gridgroup.js"></script>
2.配置KO
function JobTaskViewModel() {
var self = this;
self.JobTaskList = ko.observableArray([]);
self.RemoveJobTask = function() {
$('#job_task_table tbody tr').remove();
};
self.AfterAddJobTask = function (node, index, elem) {
//一般情况下KO的foreach afterAdd事件,每添加一行执行三次
//node.nodeType 分别是3,1,3 等于1的时候说明已经添加到dom中
if (node.nodeType == 1 && index == self.JobTaskList().length - 1) {
{
console.debug(index);
$('#job_task_table').gridgroup({ head: null, column: [0, 1],refresh:true });
}
}
};
}
var jobTaskViewModel = new JobTaskViewModel();
ko.applyBindings(jobTaskViewModel);
Table配置：
<table width="826" id="job_task_table" class="zwgl_wrap_table zwgl_wrap_table_s">
<thead>
<tr style="background-color: rgb(247, 247, 247);">
<th width="100">名称一</th>
<th width="100">名称二</th>
<th width="60">用户</th>
<th width="60">目标</th>
<th width="60">交付</th>
<th width="60">任务</th>
</tr>
</thead>
<tbody data-bind="foreach:{data:JobTaskList, afterAdd:AfterAddJobTask}">
<tr>
<td data-bind="text: ProjectName"></td>
<td data-bind="text: JobTitle"></td>
<td data-bind="text: TaskUserName"></td>
<td data-bind="text: TargetDeliveryNum"></td>
<td data-bind="text: RealDeliveryNum"></td>
<td data-bind="text: TaskNum"></td>
</tr>
</tbody>
</table>
ajax请求：
$.ajax({
cache: false,
url: '@Url.Action("GetJobDeliveryNumAndTaskNum")',
type: 'post',
data: obj,
success: function (obj) {
if (obj.Success) {
if (obj.Result.length > 0) {
jobTaskViewModel.JobTaskList.removeAll();
jobTaskViewModel.RemoveJobTask();
jobTaskViewModel.JobTaskList(obj.Result);
} else {
}
}
else {
}
},
error: function (a) {
}
});
总结
上面这些步骤其实是走了弯路，因为gridgroup的设计是第一次执行缓存表格数据，所以后续的查询总是合并行后展示的数据是以前的。
(function ($) {
$.fn.extend({
gridgroup: function (options) {
//获取表参数
var gridConfig = this.data["tableData"];
//初始化表参数
if (!gridConfig) {
修改后
(function ($) {
$.fn.extend({
gridgroup: function (options) {
//获取表参数
var gridConfig = this.data["tableData"];
//初始化表参数
if (!gridConfig || (options.refresh||false)) {
这样就就可以在ajax返回结果后，顺序执行KO绑定和gridgroup分组了。
success: function (ret) {
if (ret.Success) {
jobTaskViewModel.JobTaskList.removeAll();
$('#job_task_table tbody tr').remove();
jobTaskViewModel.JobTaskList(ret.Result);
$('#job_task_table').gridgroup({ head: null, column: [0, 1], refresh: true });
}
else {
console.debug("任务统计失败," + obj.Result);
}
},
Table代码也可以改成
<tbody data-bind="foreach:JobTaskList">
Model去掉多余的代码变成
function JobTaskViewModel() {
var self = this;
self.JobTaskList = ko.observableArray([]);
}
这样写是不是感觉KO好清爽啊！！！！
有篇文章对于理解afterAdd执行三次做了说明：
afterAdd及beforeRemove函数会固定收到三个参数，element、index及data，其中 element 为模板容器中的各元素,
实际运作时afterAdd/beforeRemove会收到不同的element被呼叫三次，原因是除了<tr>之外，<tbody>到<tr>之间的空白、</tr>到</tbody>间的空白也各算一个Element，(FF和chrome是忽略这个空格的)其 nodeType 为3即TEXT_NODE， 代表TEXT_NODE。 因此三次传入的element分别为TEXT_NODE、ELEMENT_NODE、TEXT_NODE，而第二次传入的ELEMENT_NODE是<tr>...</tr>间的内容，才是我们需要处理的对象，故加入if (elems.nodeType == 1)的判断。
要注意，一旦调用了了beforeRemove，konckout.js就不再自动帮你移除该笔数据在网页对应的元素，必须自行处理，但这也提供开发人员绝对的控制权，可*安排HTML元素要怎么从网页上退出。