目标

使用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元素要怎么从网页上退出。

knockoutjs+jquery.gridgroup 实现table数据加载和行合并的更多相关文章

  1. JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  2. jQuery easyui datagrid 的数据加载

        其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...

  3. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  4. 谈谈easyui datagrid 的数据加载(转)

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  5. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

  6. 谈谈easyui datagrid 的数据加载

    文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...

  7. jquery easyui easyui-treegrid 使用异步加载数据

    jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...

  8. JQuery 之 在数据加载完成后才自动执行函数

    数据加载完成执行: $(window).load(function(){ ... }); 进入页就执行,不论等数据是否加载完成: $(document).ready(function(){ ... } ...

  9. jQuery+Ajax滚屏异步加载数据实现(附源码)

    一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...

随机推荐

  1. July 18th, Week 30th Monday, 2016

    Truth needs no color; beauty, no pencil. 真理不需要色彩,美丽无需涂饰. Most of the time, giving some color to trut ...

  2. clock divider

    一个clock的产生: 1) Clock source的选择: cgm_mux5(.clk_out, .clk_in0, .clk_in1, .clk_in2, .clk_in3, .clk_in4, ...

  3. Android ListView从网络获取图片及文字显示

    上一篇文章说的是ListView展示本地的图片以及文本,这一篇说一下如何从网络获取图片以及文本来显示.事实上,一般是先获取Josn或sml数据,然后解释显示.我们先从网上获取xml,然后对其进行解析, ...

  4. [BZOJ 2350] [Poi2011] Party 【Special】

    题目链接: BZOJ - 2350 题目分析 因为存在一个 2/3 n 大小的团,所以不在这个团中的点最多 1/3 n 个. 牺牲一些团内的点,每次让一个团内的点与一个不在团内的点抵消删除,最多牺牲 ...

  5. async 异步流程控制规则

    github 学习async网址 : https://github.com/caolan/async/ 1.Async 函数介绍 async 主要实现了三个部分的流程控制功能 1.集合:Collect ...

  6. .Net中String和StringBuilder的区别

    String对象是不可变的而StringBuilder则不是这样,可以方便的Append进行扩展. 比如:string aa="123456",那么aa就会在内存中占用一块能放下这 ...

  7. ubuntu经常使用的命令摘要

    1.df命令 # df -ha 显示所有文件和分区的使用 # df -h /dev/sda1 显示sda1磁盘使用率 # df -T 显示文件系统名称属于每个分区.区的格式类型(比方ext3) 注:h ...

  8. 树莓派3B上部署运行.net core 2程序

    针对Linxu arm处理器如何部署.net core 2的资料很少,网上找到几篇但都写得不够详细,按照他们教程来撞墙了,折磨了几天终于部署成功了,先上一张运行成功的图 1.windows系统中,在项 ...

  9. php算法题

    一群猴子排成一圈,按1,2,…,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去…,如此不停的进行下去,直到最后只剩下一只猴子为止,那只猴子就叫做大 ...

  10. yii2项目中运行composer 过程中遇到的问题

    问题1: Your requirements could not be resolved to an installable set of packages 则表明 未安装fxp/composer-a ...