jsRender

有了jsRender

写在前面

说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到了slides.js插件,轮播图也用到了分页,数据第一页轮播图页码能正常使用,数据列表翻到第二页则轮播图的页码就无法正常使用,实际上PagedList.MVC自带的样式文件已经和slides.j自带的样式文件冲突,我还特意修改了slides.js的样式文件,然并无卵用,让郁闷飞一会。。。

1、基于MVC PagedList.MVC的分页写法


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

var currentPage = 1;

        $(function () {

            //工具栏绑定页码

            currentPage = $(‘.pagination li.active‘).text();

            currentPage = $(‘.pagination li.active‘).text();

            $(‘body‘).on(‘click‘‘.pagination li:not(".active")‘function (e) {

                var txtnum = $(this).text();

                if (parseInt(txtnum) > 0) {

                    DoSearch(txtnum);

                else if (txtnum == ‘»‘) {

                    DoSearch(parseInt(currentPage) + 1);

                else if (txtnum == ‘«‘) {

                    DoSearch(parseInt(currentPage) - 1);

                else if (txtnum == ‘««‘) {

                    DoSearch(1);

                else if (txtnum == ‘»»‘) {

                    var pagenum = $(this).find(‘a‘).attr("href").replace(/[^\d]+/gi, ‘‘);

                    DoSearch(pagenum);

                }

                return false;

            });

        });

//列表复合查询条件

function DoSearch(page) {

         var item = {};

         if (page) {

            item.pageIndex = page;

          }

          PostData(item);

        }

//重点就是这个方法,用于AJAX分页效果,主要是利用页面携带的数据来循环替换

function PostData(objdata) {

         $.post(‘/Home/Index?rdm=‘ + Math.random(), objdata, function (d) {

               //1、替换页面内列表数据

                $(".contentajax").html($(d).find(".contentajax").html());

               //2、替换页码

               $(".ajaxpage").html($(d).find(".ajaxpage").html());

                currentPage = $(‘.pagination li.active‘, $(d)).text();

        });

 }

  

2、郁闷时在园子里看到一位朋友发的jq分页插件

http://www.cnblogs.com/Jusoc/p/4757079.html#3254097 这是他的文章,他在文章中提到这个jq分页插件,插件的样式是仿照bootstrap做的,API用起来还算是比较方便。

3、效果图

4、 理论再华丽还是要用coding来实践

我按照这位朋友文章中写到的用法以及查看API写了个demo,发现程序没有报错就是没有数据,他提到remote参数中包含3个事件:beforeSend、success、complete,注释中写到在success中处理后台返回的数据,也就是个json串,json串中必须包含数据总数(total或count)。 我在demo中看到这三个时间不起来作用,不知道这位伙计自己实践了没有,于是我查看插件源码,发现源码中只有一个callback事件,在这里处理返回的数据,OK,解决了数据返回问题。

下面问题又来了,由于是分页,还算是比较正常的需求,那么这时候我就发现,通常的做法肯定是直接在callback中foreach,各种拼接字符串、单引号、双引号。 我拼着拼着自己就拼不下去了,我接着看这个插件的DEMO,该插件的pageIndex是从0开始,好多插件都是从1开始,所以基于linq的分页一般都这样写:((pageIndex-1)*pageSize),那如果是0的话就不用减了。 再API的下方一个概念吸引了我的眼球:如何呈现返回的数据,介绍一款jq模版插件,只需定义呈现模版,一行js搞定数据呈现,其实js模版倒不是多么陌生,只是以前没去用过,觉的拼接jq就很牛气了,没想到这个模版这么大的魅力。 而且一定程度上这个模版的思想就像Angularjs的数据操作方式一样。

纠结了这半天我又重新把DEMO写了一遍,搞定。 DEMO虽简单,但是带给我的收获缺很大, 我会重构我们的项目,并且推广前台尝试这种方式。

5、关键地方处理代码

 1 @{
 2     ViewBag.Title = "Index";
 3     Layout = "~/Views/Shared/_Layout.cshtml";
 4 }
 5 <style>
 6     h2
 7     {
 8         margin-left:80px;
 9     }
10 </style>
11 <link href="~/Content/bootstrap.css" rel="stylesheet" />
12 <link href="~/Content/jquery.pagination.css" rel="stylesheet" />
13 <h2>jq Pagination and js Template</h2>
14 <div class="container">
15     <table id="rsTable" class="table table-striped">
16         <thead>
17             <tr>
18                 <th>ID</th>
19                 <th>Name</th>
20                 <th>Price</th>
21             </tr>
22         </thead>
23         <tbody id="rsbody">
24
25         </tbody>
26
27     </table>
28     <div id="pager" class="m-pagination"></div>
29 </div>
30
31 <script src="~/Scripts/jsrender.min.js"></script>
32 <script src="~/Scripts/jquery.pagination-1.2.1.js"></script>
33 <script type="text/javascript">
34     $(function () {
35
36         $("#pager").page({
37             remote: {
38                 url: ‘/Home/AjaxList‘, //请求地址
39                 param: {},             //请求参数
40                 callback: function (data) {
41                     //回调函数,处理返回值
42                     var modelList = data.modelList;
43                     $("#rsbody").empty().html($("#trTmpl").render(modelList));
44                 },
45                 pageIndexName: ‘pageIndex‘,
46                 pageSizeName: ‘pageSize‘,
47                 totalName: ‘total‘
48             },
49             pageSize: 3
50         });
51     });
52 </script>
53 <script type="text/x-jsrender" id="trTmpl">
54     <tr>
55        <td>{{:ID}}</td>
56        <td>{{:Name}}</td>
57        <td>{{:Price}}</td>
58     </tr>
59 </script>

 public ActionResult Index()
        {
            return View();
        }

        public JsonResult AjaxList()
        {
            int pageIndex = Convert.ToInt16(Request["pageIndex"]);
            int pageSize = Convert.ToInt16(Request["pageSize"]);
            IList<Product> list = new List<Product>()
            {
                new Product{ID=1,Name="iphone6 plus",Price=6999},
                new Product{ID=2,Name="iphone6",Price=4999},
                new Product{ID=3,Name="MX5",Price=1799},
                new Product{ID=4,Name="MEILAN NOTE",Price=799},
                new Product{ID=5,Name="XIAOMI 2S",Price=1299}
            };

            IList<Product> modelList = list.Skip(pageIndex * pageSize).Take(pageSize).ToList();
            int count = list.Count;

            var strJson = new JsonResult();
            strJson.Data = new
            {
                modelList=modelList,
                total=count
            };
            strJson.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return strJson;
        }

总结

虽说是做了个分页的demo,但是在使用这个分页插件的过程中,却发现了js模版插件这个好东西,写法简洁而且页面jq也简洁不少。 以前还写过一片基于MVC Angularjs分页。多多对比,根据自己需要使用。

下载链接:http://yunpan.cn/cmfE7xgsWqqKV  访问密码 4d30

分类: JavaScript/jQueryMVC

时间: 2024-12-18 03:01:27

jsRender的相关文章

JsRender模板

一.jsrender jsrender 是下一代的 jQuery 模板,专为高性能的纯字符串渲染而优化,无需 DOM 和其他 jQuery 依赖. 在JsRender中,是通过调用方法render()来渲染模板的.换句话说,就是在Html文件中使用java script来输出html模板的内容. 二.下载最新的jsrender.js和jsrender.min.js官方文档下载:http://www.jsviews.com/#download jquery下载地址: http://jquery.c

jsRender模板引擎

jsRender模板引擎 上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRender.个人觉得这些东西学习起来还是很简单的,挑一个看看就行,实际要用到了哪个,官网看看demo也就会用了.之所以选择jsRender,因为它具有以下特点: 简单直观 功能强大 可扩展的 快如闪电 当然,谁都会自己给自己的产品下这样定义.不过我用完后,确实发现它:简单直观

jsrender demo

1.内置的模板标签,{{:x}}解析html与{{>x}}不解析html区别 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <script src="../js/jquery-2.1.4.js"></script>

jsrender简单使用

{{: ...}} {{> ...}} {{include ...}} {{for ...}} {{props ...}} {{if ...}} {{else ...}} {{!-- ... --}} {{* ... }} and {{*: ...}} template.render() $.render.myTmpl() $("#myTmpl").render() <!DOCTYPE html> <!-- To run the current sample c

JsRender for object 语法说明

JsRender 作为一款JavaScript模版引擎,必不可少的会有循环功能,也就是for,但由于JsRender过于灵活,for竟然可以接受object作为循环对象. {{for Array}}和{{for Object}}都是允许的,{{for Array}}大家都能理解,就是遍历一个数组,逐个取出每个元素.但{{for Object}}就有点让人匪夷所思了,而且官方文档只是举了个没什么帮助的例子,其他无任何说明. 刚开始小菜以为{{for Object}}的用意是遍历该Object的所有

JsRender系列demo-对null 和boolen类型数据的探讨

废话不说了,直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="te

有了jsRender,妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了

写在前面 说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到了slides.js插件,轮播图也用到了分页,数据第一页轮播图页码能正常使用,数据列表翻到第二页则轮播图的页码就无法正常使用,实际上PagedList.MVC自带的样式文件已经和slides.j自带的样式文件冲突,我还特意修改了slides.js的样式文件,然并无卵用,让郁闷飞一会... 1.基于M

JsRender系列demo(6)-无名

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script> <script src="../../jsrender.js" type="text/javascript"></script>

JsRender系列demo(5)compline

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script> <script src="../../jsrender.js" type="text/javascript"></script>