最近在使用mvcpager时发现ajax分页需要使用Partial来实现,而且使用起来还是觉得不太方便。突然想自己做一个mvc的ajax分页,但是如果table直接用js输出就不好维护了。

angularJS有一个ng-repeat属性,可以重复输出html,觉得这个方式不错,所以就有了下面这个方法。

我的模板主要是使用了2个自定义属性xs-repeat(根据此id绑定),xs-template(进行模板隐藏和与普通绑定区分)。

目前只能绑定json格式,而且此方式不易于seo,但是作为后台可行,目前已经实现与js+ajax结合分页。

下面是我的代码,可以直接保存为html格式,运行即可。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="../Script/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[xs-template]").hide();
$("a").click(function () {
$("li").removeClass("active");
$(this).parent().addClass("active");
Change($(this).text());
});
Change(1);
}); function bindRepeat(repeatid, data) {
$("[xs-repeat='" + repeatid + "']").not("[xs-template]").remove();
var template = $("[xs-template][xs-repeat='" + repeatid + "']").prop("outerHTML");
var arrMatch = template.match(/{{[^{]*}}/g);//{{ID}}匹配
var html = "";
for (var i = 0; i < data.length; i++) {
var thisHtml = template.replace("xs-template=\"\"", "");
for (var j = 0; j < arrMatch.length; j++) {
var columnName = $.trim(arrMatch[j].replace(/{|}/g, ""));
var regColumn = new RegExp(arrMatch[j], "g");
thisHtml = thisHtml.replace(regColumn, data[i][columnName]);
}
html += thisHtml;
}
$("[xs-template][xs-repeat='" + repeatid + "']").after(html);
$("[xs-repeat='" + repeatid + "']").not("[xs-template]").show();
} function Change(page) {
var txt = "[{ID:'xxx',Name:'first" + page + "',Sex:'dddd',Tel:'123456789'}";
for (var i = 1; i < 9; i++) {
txt += ",{ID:'123" + page + i + "',Name:'张三" + page + i + "',Sex:'男" + page + i + "',Tel:'123456789" + page + i + "'}";
}
txt += "]";
var obj = eval("(" + txt + ")"); bindRepeat("mytable", obj)
}
</script>
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>电话号码</th>
</tr>
</thead>
<tbody>
<tr xs-repeat="mytable" xs-template>
<td><a href="javascript:void(0)" onclick="alert('{{ID}}')">{{ID}}</a></td>
<td>{{Name}}</td>
<td>{{Sex}}</td>
<td>{{Tel}}</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="active"><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">4</a></li>
<li><a href="javascript:void(0)">5</a></li>
<li><a href="javascript:void(0)">6</a></li>
<li><a href="javascript:void(0)">7</a></li>
<li><a href="javascript:void(0)">8</a></li>
<li><a href="javascript:void(0)">9</a></li>
<li><a href="javascript:void(0)">10</a></li>
</ul>
</body>
</html>

截图效果:

Jquery 学习之路(五)grid绑定模板的更多相关文章

  1. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. 初步学习jquery学习笔记(五)

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  3. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  4. jQuery 学习之路(1):引子

    一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...

  5. 我的QT5学习之路(三)——模板库、工具类和控件(下)

    一.前言 作为第三篇的最后一部分,我们来看一下Qt的控件,谈到控件,就会让人想到界面的美观性和易操作性,进而想到开发的便捷性.作为windows界面开发的MFC曾经是盛行了多少年,但是其弊端也随着其他 ...

  6. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  7. jQuery学习之路(3)- 事件

    ▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...

  8. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

  9. jQuery 学习之路(4):事件

    一.文档载入事件 二.事件绑定 三.事件对象 四.浏览器事件 五.表单事件 六.键盘事件 七.鼠标事件

随机推荐

  1. bzoj 1221 [HNOI2001] 软件开发 费用流

    [HNOI2001] 软件开发 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1938  Solved: 1118[Submit][Status][D ...

  2. nodejs formidable混合表单提交

    废话不多说,直接上代码: 前端页面: <!DOCTYPE html><html><head><link rel=’stylesheet’ href=’/sty ...

  3. CSS3知识之折角效果

    CSS3折角效果:可兼容不同背景

  4. 南阳ACM 题目517:最小公倍数 Java版

    最小公倍数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致. 但也并非纯粹的偶然:60是个优秀的数字,它 ...

  5. js获取摄像头视频流

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 【NOIP】提高组2013 火柴排队

    [题意]两列n个火柴,分别有高度ai和bi(同一列高度互不相同),每次可以交换一列中的两个相邻火柴,定义距离为∑(ai-bi)^2,求使距离最小的最少交换次数,n<=10^5. [算法]逆序对 ...

  7. 【Codeforces】868C. Qualification Rounds

    [题目]C. Qualification Rounds [题意]给定n个问题和K个人,给定每个人知道的问题列表,求能否找到一个非空问题集合,满足每个人知道的集合中问题数量都不超过集合总题数的一半.n& ...

  8. Response.Redirect在新窗口打开(转载)

    Response.Rederect在默认情况下是在本页跳转,所以除了在js中用window.open或是给A标签添加target属性之外,在后台似乎不能来打开新的页面,其实不然,通过设置form的ta ...

  9. this的九种常用场景(转子jb51.net)

    [场景1]全局环境中的this指向全局对象 ; alert(a); b = ; alert( ; [场景2]对象内部函数的this指向调用函数的当前对象 ; var bar = { a: , test ...

  10. 自定义ToolBar

    一.Toolbar的简介 Toolbar 是 android 5.0 引入的一个新控件,Toolbar出现之前,我们很多时候都是使用ActionBar以及ActionActivity实现顶部导航栏的, ...