examples/grid.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>表格</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <style>
            .ms-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; }
            .ms-grid th { text-align:left; background: black; color:White; }
            .ms-grid td, th { padding: 0.4em; }
            .ms-grid tr:nth-child(odd) { background: #DDD;color:black; }
            .ms-grid-pageLinks { margin-bottom: 1em; }
            .ms-grid td a{color:red;font-family:Microsoft YaHei,Georgia, 'Times New Roman', Times, serif;}
            .ms-grid-pageLinks a { padding: 0.5em;display: inline-block;zoom:1; }
            .ms-grid-pageLinks a.selected { background: black; color: White; }

        </style>
        <script type="text/javascript">

            var grid = avalon.define("grid", function(scope) {
             //   scope.$skipArray = ["items"]
                scope.items = [
                    {name: "Well-Travelled Kitten", sales: 352, price: 75.95},
                    {name: "Speedy Coyote", sales: 89, price: 190.00},
                    {name: "Furious Lizard", sales: 1052, price: 25.00},
                    {name: "Indifferent Monkey", sales: 1, price: 99.95},
                    {name: "Brooding Dragon", sales: 0, price: 6350},
                    {name: "Ingenious Tadpole", sales: 39450, price: 0.35},
                    {name: "Optimistic Snail", sales: 420, price: 1.50}
                ]
                scope.showItems = [];//当前页面要显示出来的items
                scope.pageIndex = 0; //当前页数
                scope.pageCount = 3; //每页显示多个item
                scope.pages = [];//装着所有页码,以零开始
                scope.getShowItems = function() {
                    var i = scope.pageIndex, c = scope.pageCount;
                    var array = scope.items.$model.slice(i * c, (i + 1) * c)

                    scope.showItems = avalon.mix(true, [], array)
                }
                scope.addItem = function() {
                    var a = {name: "New item", sales: 0, price: 100};
                    scope.items.push(a);
                    scope.showItems.push(avalon.mix(true, {}, a));
                    scope.getPages();
                };
                scope.removeItem = function(fn, e) {
                    e.preventDefault()
                    var item = fn()[0];
                    scope.items.remove(item);
                    if (!scope.showItems.length) {
                        if (Math.ceil(scope.items.length / scope.pageCount) === scope.pageIndex) {
                            scope.pageIndex--;
                        }
                        scope.getShowItems();//如果删光了,尝试到items取
                    }
                    scope.getPages();

                };
                scope.getPages = function() {
                    var total = Math.ceil(scope.items.length / scope.pageCount);
                    scope.pages = avalon.range(total);//用法与python, underscorejs一致,生成一个整数数组
                }
                function compare(a, b) {
                    return a.name < b.name ? -1 : 1;
                }
                scope.sortByName = function() {
                    scope.items.sort(compare);
                    scope.showItems.sort(compare);
                };
                scope.jumpToFirstPage = function() {
                    scope.pageIndex = 0;
                    scope.getShowItems();
                };
                scope.jumpPage = function($index, e) {
                    e.preventDefault()
                    scope.pageIndex = $index;
                    scope.getShowItems();
                }
            });
            grid.getShowItems();
            grid.getPages()

        </script>
    </head>
    <body>
        <div class="liveExample" ms-controller="grid">
            <table class="ms-grid" cellspacing="0" >
                <thead>
                    <tr>
                        <th>Item Name</th>
                        <th>Sales Count</th>
                        <th>Price</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody >
                    <tr ms-repeat-row="showItems">
                        <td>{{row.name}}</td>
                        <td>{{row.sales | number}}</td>
                        <td>${{row.price }}</td>
                        <td><a href="javascript:void(0)" ms-click="removeItem($remove, $event)">删除</a></td>
                    </tr>
                </tbody>
            </table>
            <div class="ms-grid-pageLinks">
                <span>Page:</span>
                <span >
                    <a ms-repeat-page="pages" ms-href="#{{page}}" ms-click="jumpPage($index,$event)"  ms-class-selected="$index==pageIndex"   >{{page+1}}</a>
                </span>
            </div>
            <button ms-click='addItem'>
                Add item
            </button>
            <button ms-click='sortByName'>
                Sort by name
            </button>
            <button ms-enabled="pageIndex" ms-click="jumpToFirstPage">
                Jump to first page
            </button>
        </div>
    </body>
</html>