初学avalon自己做的一个小页面

最新推荐文章于 2023-05-18 17:40:58 发布

不懂love

最新推荐文章于 2023-05-18 17:40:58 发布

阅读量329

点赞数

分类专栏： avalon

本文链接：https://blog.csdn.net/qq719365064/article/details/52925384

版权

avalon 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码如下：

<link href="CSS/Index.css" type="text/css" rel="stylesheet"/>
    <script src="JS/jquery-1.8.2.js"></script>
    <script src="JS/avalon.js"></script>
    <script>
        //加载分页插件
        require(["pager/avalon.pager"], function () {
            var vm = avalon.define({
                $id: "customer",
                CustomerData: {},
                Customer: "",
                QueryDT: function () {
                    InData(vm.Customer, 10, 1, true);
                },
                RemoveDT: function (id, del) {
                    if (confirm("确定要删除吗？")) {
                        $.ajax({
                            url: "VM/Delete.ashx",
                            dataType: "html",
                            type: "post",
                            data: { "id": id },
                            success: function (data) {
                                if (data == "1") {
                                    if (vm.CustomerData.size() > 10) {
                                        del();
                                    } else {
                                        InData("", 10, 1, true);
                                    }

                                    
                                } else {
                                    alert("删除失败，请与管理员联系");
                                }
                            }
                        });
                    }
                    
                },
                add: function () {
                    window.location.href = "/operation.html";
                },
                edit: function (id) {
                    window.location.href = "/operation.html?id="+id;
                }
            });

            var vm1 = avalon.define({
                $id: "page",
                pager: {
                    totalItems: 1500,
                    onJump: function (e, data) {
                        InData(vm.Customer, 10, data.currentPage, false);
                    },
                   showJumper: true
                },
                $skipArray: [""]
            }); 
            vm1.pager.$watch("totalItems", function (a) {
                var widget = avalon.vmodels.pp
                if (widget) {
                    widget.totalItems = a;
                    widget.currentPage = 1;
                }
            });
            function InData(customer, pagesize, pageindex, IsQuery) {
                //获取数据
                $.ajax({
                    url: "VM/Query.ashx",
                    dataType: "json",
                    type: "post",
                    data: { "customer": customer, "PageSize": pagesize, "PageIndex": pageindex, "Type": 1,"id":0 },
                    success: function (data) {
                        vm.CustomerData = data;
                    }
                });
                if (IsQuery) {
                    //获取总记录数
                    $.ajax({
                        url: "VM/Query.ashx",
                        dataType: "html",
                        type: "post",
                        data: { "customer": customer, "Type": 2 },
                        success: function (data) {
                            vm1.pager.totalItems = data;
                        }
                    });
                }
                avalon.scan();
            }

            InData("", 10, 1, true);
            
            avalon.scan();
        });
    </script>
</head>
<body>
    <div ms-controller="customer">
        <div>客户代号：<input type="text" ms-duplex="Customer" />&nbsp;<input type="button" value="查找" ms-click="QueryDT()" />&nbsp;<input type="button" value="新增" ms-click="add" /></div>
        <table width="100%" class="customerinfo">
            <tr>
                <th>Customer</th>
                <th style="width:28%">CustName</th>
                <th>EmployeeID</th>
                <th>EmployeeName</th>
                <th>Region</th>
                <th>Country</th>
                <th>BU</th>
                <th>Tiers</th>
                <th>NewGroup</th>
                <th colspan="2">操作</th>
            </tr>
            <tr ms-repeat="CustomerData" ms-class="event:$index%2==1" ms-hover="hover" ms-if-loop="$index<10">
                <td>{{el.Customer}}</td>
                <td>{{el.Name}}</td>
                <td>{{el.EmployeeID}}</td>
                <td>{{el.EmployeeName}}</td>
                <td>{{el.Region}}</td>
                <td>{{el.Country}}</td>
                <td>{{el.BU}}</td>
                <td>{{el.Tiers}}</td>
                <td>{{el.NewGroup}}</td>
                <td><input type="button"  ms-click="RemoveDT(el.ID,$remove)" value="删除" /></td>
                <td><input type="button" ms-click="edit(el.ID)" value="编辑" /></td>
            </tr>
        </table>
    </div>
    <div ms-controller="page">
        <div ms-widget="pager,pp"></div>
    </div>