目标

使用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. leveldb - menifest文件格式

    MANIFEST文件是Level DB的元信息文件,它里面的格式是leveldb的Log格式,一个menifest是一个record: void VersionEdit::EncodeTo(std:: ...

  2. c语言二叉树

    Department of Computing and Information SystemsCOMP10002 Foundations of AlgorithmsSemester 2, 2014As ...

  3. MyEclipse设置编码方式

    1.windows->Preferences……打开"首选项"对话框,左侧导航树,导航到general->Workspace, 右侧Text file encoding ...

  4. ArcGIS与SuperMap的使用比较(1)

    用了超过6年的超图产品了,因此对超图的很多特性比较熟悉,去年开始接触ARCGIS,并用来研发了一些新产品,因此对于两个GIS平台有些感受,记录如下: 比较版本:ARCGIS10.1与SuperMap ...

  5. SharedPreference注册OnSharedPreferenceChangeListener一直无法回调问题

    注册代码如下: SharedPreferences sp = getSharedPreferences("AndroidDemo", Context.MODE_PRIVATE); ...

  6. 批处理Ping服务器

    for /f "tokens=2,*" %%i in ('reg query "HKCU\Software\Microsoft\Windows\CurrentVersio ...

  7. Digg Reader 登录不了,原来如此

    cdnjs.cloudflare.com 不能访问,你懂的,给 https://cdnjs.cloudflare.com 跟 http://cdnjs.cloudflare.com 架个梯子就可以了, ...

  8. Microsoft.CSharp.CSharpCodeProvider

    Microsoft.CSharp.CSharpCodeProvider MSDN 提供对 C# 代码生成器和代码编译器的实例的访问.类提供可用来检索 C# ICodeGenerator 和 ICode ...

  9. Gson整合Volley返回对象--GsonRequest

    Gson是一个使用映射支持JSON与Java对象之间相互转换的库文件.你可以定义和JSON keys相对应名称的Java对象.把对象传递给传递Gson,然后Gson会帮你为对象填充字段值. 下面是一个 ...

  10. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...