jquery 分页控件2

jquery 分页控件(二)

上一章主要是关于分页控件的原理，代码也没有重构。在这一章会附上小插件的下载链接，插件主要就是重构逻辑部分，具体可以下载源文件看下，源代码也有注释。为了测试这个插件是能用的，我弄了个简单的asp.net例子（vs 2010）。通过ajax根据每一页请求数据，数据是使用json格式进行传输，通过knockout.js绑定。在这里顺便推荐一下汤姆大叔的Knockout应用开发指南 ，是学习Knockout非常好的文章。

惯例：插件Demo        Asp.net Demo

效果图：

主要思路是通过分页控件的callback方法把  当前页  和  每页显示数量  传给pageselectCallback方法，pageselectCallback请求后台的getModel方法获取当前页的数据，然后数据通过knockout提供的方法把数据绑定到Html控件上。

一、定义请求数据方法

    [WebMethod]
    public static string getModel(string index, string pagesize)
    {
        int pageIndex = Int32.Parse(index);
        int pageSize = Int32.Parse(pagesize);
        Models models = new Models();
        IList<Model> allModels = models.getModels();//获取全部数据
        if (pageIndex > 0)
        {
            pageIndex = pageIndex * pageSize;
        }
        if (pageSize > (allModels.Count - 1 - pageIndex))
        {
            pageSize = allModels.Count - 1 - pageIndex;
        }
        var pageSysmenus = allModels.Skip(pageIndex).Take(pageSize).ToList<Model>();//根据页数和每页显示数量获取数据
        string thedata = JsonHelper.ObjDivertToJson(pageSysmenus);//把数据转成json格式

        return thedata;
    }
   
    //获取总数
    [WebMethod]
    public static int getCounts()
    {
         Models models = new Models();
        IList<Model> allModels = models.getModels();
        int count = allModels.Count - 1;
        return count;
    }

二、knockout 绑定数据

 <table class="mytable" border="1" cellspacing="0">
            <thead style="background-color: #0AA403">
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        TrueName
                    </th>
                    <th>
                        Sex
                    </th>
                    <th>
                        Email
                    </th>
                </tr>
            </thead>
            <tbody id="tChangeClor" data-bind="foreach: models">
                <tr>
                    <td>
                        <span data-bind="text: Id"></span>
                    </td>
                    <td>
                        <span data-bind="text: Name"></span>
                    </td>
                    <td>
                        <span data-bind="text: TrueName"></span>
                    </td>
                    <td>
                        <span data-bind="text: Sex"></span>
                    </td>
                    <td>
                        <span data-bind="text: Email"></span>
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tr>
                <td id="Pagination" class="pagination">
                </td>
            </tr>
        </table>

data-bind绑定的字段要与后台model的字段一致，当然knockout不单只是这个功能，还有数据验证等功能，很好用的一个插件。

三、ajax 请求数据

    //定义knockout的viewmodel
    var viewModel = function () {
        var self = this;
        self.models = ko.observableArray();
    }
    var vm = new viewModel();
    //分页控件的callback方法，通过当前页和显示页数请求数据
    var pageselectCallback = function (page_index, pagesize) {
        var mydata = "{'index':" + page_index + ",'pagesize':" + pagesize + "}";//post到getPage.aspx/getModel的参数
        $.ajax({
            type: "post",
            url: "getPage.aspx/getModel",
            data: mydata,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {
                var datas = data.d;
                mappingData(datas);
            },
            error: function (Request) {
                alert(Request.responseText);
            }
        });
    };
    var mappingData = function (data) {
        var mydata = ko.mapping.fromJSON(data);
        vm.models = ko.mapping.fromJS(mydata, {}, vm.models);//把json格式转换成object格式，赋值给models
        $('.mytable tbody tr:even').addClass('odd');
    };
    $(function () {
        var getCounts;
        $.ajax({
            type: "post",
            url: "getPage.aspx/getCounts",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {
                var datas = data.d;
                getCounts = Math.ceil(datas / 2);//总页数，向上取整
                //调用分页控件插件
                $("#Pagination").pagination({
                    pageSize: 2,
                    current_page: 1,
                    display_num: 10,
                    edge_num: 3,
                    counts_num:getCounts,
                    callback: pageselectCallback
                });
            },
            error: function (Request) {
                alert(Request.responseText);
            }
        });
        ko.applyBindings(vm, document.getElementById('tChangeClor'));
    });

关于ko.mapping.fromJSON(data)还是ko.mapping.fromJS(data)的判断，如果data是string类型（ data ='{"Id":1,"Name":"WinKi"}' )就用fromJSON，如果data是object类型（ data = {Id:1,Name:"WinKi"} ) 就用fromJS。如果使用$.getJSON()获取数据可以把JSON格式转换成object格式。

这个只是测试例子，实际项目中获取数据部分可以根据存储过程来获取数据，或者把全部的数据先存到缓存中。这样就不会像我例子那样每次都要先查找所有的数据。

如果您觉得还不错，点个推荐吧。

转载请注明出处！谢谢！

C# 白话系列之——白话委托

 

今天看到首页有个委托的文章，但大都写的太专业，而且没有实用的例子场景。正好昨天做了一个有关委托的功能，所以也来凑个热闹，用白话掰掰

一、委托是什么

我们都知道数据类型，简单点的如，想给一个变量赋值整数，那就要定义一个 int类型的变量

int var=5;

想给一个变量赋值字符串那就定义一个string类型的变量

string var ="test";

复杂点的就是自己定义一个类，然后就可以定义类变量

MyClass myClass= new MyClass();

现在我们有如下一个方法，怎样把这个方法可以赋值给一个变量呢？

        public string GetMessage(string messageType)
        {
            string ret = "";

            switch (messageType)
            {
                case "error":
                    ret = "错误消息";
                    break;
                case "warning":
                    ret = "警告消息";
                    break;
                default:
                    ret = "未知消息";
                    break;
            }
            return ret;
        }

这个就要委托来登场了。先看实现

        delegate string MessageDelegate(string messageType);
        public void Test()
        {
            MessageDelegate myMessage = GetMessage;

            string ret = myMessage("error");
        }

定义一个类大家都会 ，用 class 关键字来定义一个类MyClass

        class MyClass
        {
        }

同理，用 delegate 关键字来定义一个委托 MessageDelegate。

一定要有这个一个概念，我们用 delegate 关键字定义的委托（MessageDelegate）是一个数据类型。

int 类型的变量用来赋值整数的，string类型的变量用来赋值字符串的，而委托类型的变量是用来赋值函数的。

当然因为每个函数的参数不同，返回的数据不同，所以在定义委托的时候也就指明了这个委托类型的变量可接受的函数。

delegate string MessageDelegate(string messageType);

如上面定义的MessageDeletegate委托数据类型，用MessageDeletegate定义的变量（myMessage）只能接受 有一个string类型的参数并且有一个sting返回值的函数（GetMessage）

MessageDelegate myMessage = GetMessage;

delegate void MyDelete(int i);

上面定义的这个MyDelete委托类型对应的函数是有一个int类型的参数，并且没有返回值。

二、委托的使用

在.net中委托基本随处可见，最常用的就是Action、Func和Predicate，它们分别有很多重载，自己可以看看。

public delegate void Action();
public delegate TResult Func<out TResult>();
public delegate bool Predicate<in T>(T obj);

现在有这么一个功能：

现在有一个int类型的集合，把所有的偶数乘以2，输出到一个新集合中。

测试数据：

            List<int> myList = new List<int>();
            for (int i = 0; i < 10; i++)
            {
                myList.Add(i);
            }

普通方法实现：

            List<int> retList = new List<int>();
            for (int i = 0; i < myList.Count; i++)
            {
                if (myList[i] % 2 == 0)
                {
                    retList.Add(myList[i] * 2);
                }
            }

用委托方法实现：

            List<int> retList = new List<int>();

            myList.ForEach((data) =>
            {
                if (data % 2 == 0)
                {
                    retList.Add(data * 2);
                }
            });

当然这个ForEach是.net提供的扩展方法，再加上lambda表达式实现。

这个还不足以说明委托的好处。

如果我们再把问题放宽点，现在有一个int类型的集合，如果里面的数字满足某个条件，则执行某个动作。

        public void MyOperation(List<int> myList, Func<int, bool> func, Action<int> action)
        {
            for (int i = 0; i < myList.Count; i++)
            {
                if (func(myList[i]))
                {
                    action(myList[i]);
                }
            }
        }

现在在把第一个问题实现下：

            MyOperation(myList, (d) =>
            {
                return d % 2 == 0;
            }, (d) =>
            {
                retList.Add(d * 2);
            });

可以近一步写成扩展方法，这个有跑题有点远了。

上面这个例子主要是说明了一点：

委托是一个函数类型的数据类型（对比int是一个整数类型的数据类型），可以把委托当做参数变量来传递。

然而因为委托变量的值是函数，这样就可以把一个函数当做参数传递到另外一个函数中。

 

分类: Jquery

标签: jquery分页控件的实际应用