Jquery 学习之路（五）grid绑定模板

浏览数：44 / 时间：2015年06月09日

最近在使用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>