tufeiping-audit-frontend-framework
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./webixasserts/webix.css">
    <link rel="stylesheet" type="text/css" href="./asserts/samples.css">
    <script charset="utf-8" type="text/javascript" src="./webixasserts/webix.js"></script>
    <script charset="utf-8" type="text/javascript" src="./auditasserts/audit.debug.js"></script>
    <title>Audit Frontend Framework: Demo</title>
    <style>
        .etable td,
        .etable th {
            padding: 10px;
            border-right: 1px solid silver;
            border-top: 1px solid silver;
        }
    </style>
</head>

<body>
    <div id="AFFDemo">
        <div>
            <h3>Audit Frontend Framework: Demo</h3>
            <p>Data Grid</p>
            <div style="float: left;">
                <audit-button label="Fetch数据" v-on:click.native="fetch()">Fetch数据</audit-button>
                <audit-button label="无效按钮">无效按钮</audit-button>
            </div>
            <div style="clear:both;"></div>
            <audit-grid :config='table' v-model='gridData' />
        </div>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        vue = new Vue({
            el: "#AFFDemo",
            data: {
                gridData: [],
                table: {
                    columns: [{
                            id: "value",
                            editor: "select",
                            sort: "string",
                            header: "Section Index"
                        },
                        {
                            id: "name",
                            editor: "text",
                            sort: "string",
                            header: ["First Name", {
                                content: "textFilter"
                            }]
                        },
                        {
                            id: "last",
                            editor: "text",
                            sort: "string",
                            header: ["Last Name", {
                                content: "textFilter"
                            }]
                        },
                        {
                            id: "address",
                            editor: "text",
                            sort: "string",
                            header: ["Address", {
                                content: "selectFilter"
                            }],
                            width: 150
                        }
                    ],
                    on: {
                        onAfterEditStop: function () {
                            this.$scope.$emit("input", this.serialize());
                        }
                    }
                }
            },
            methods: {
                fetch: function () {
                    var self = this;
                    $.get('./data', function (data) {
                        self.gridData = data;
                    });
                }
            }
        });
    });
</script>

</html>