随笔 - 7,  文章 - 0,  评论 - 24

     上一章主要是关于分页控件的原理,代码也没有重构。在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释。为了测试这个插件是能用的,我弄了个简单的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格式。

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

 

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

 

转载请注明出处!谢谢!

 

 

 

 

posted on 2013-11-06 08:49  |WinKi|  阅读(2253)  评论(4编辑  收藏