jsgrid.js 基于jquery的客户端数据表格网格js插件-BFW插件库

jsgrid.js 基于jquery的客户端数据表格网格js插件

jsGrid是基于jQuery的轻量级客户端数据网格控件。它支持基本的网格操作，如插入、过滤、编辑、删除、分页和排序。jsgrid是灵活的，允许自定义其外观和部件。
jsGrid有一个灵活的寻呼机允许将数据在客户端和服务器端。jsgrid提供不同的列类型：文本、数字、选择、复选框和更多。

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <link>

    <script type="text/javascript">
        var clients = [{
            "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false
        },
            {
                "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true
            },
            {
                "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false
            },
            {
                "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true
            },
            {
                "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false
            }];

        var countries = [{
            Name: "", Id: 0
        },
            {
                Name: "United States", Id: 1
            },
            {
                Name: "Canada", Id: 2
            },
            {
                Name: "United Kingdom", Id: 3
            }];

        bready(function() {
            use(["jsgrid.min", "jsgrid.min|jsgrid-theme.min"], function() {
                $("#jsGrid").jsGrid({
                    width: "100%",
                    height: "400px",

                    inserting: true,
                    editing: true,
                    sorting: true,
                    paging: true,

                    data: clients,

                    fields: [{
                        name: "Name", type: "text", width: 150, validate: "required"
                    },
                        {
                            name: "Age", type: "number", width: 50
                        },
                        {
                            name: "Address", type: "text", width: 200
                        },
                        {
                            name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name"
                        },
                        {
                            name: "Married", type: "checkbox", title: "Is Married", sorting: false
                        },
                        {
                            type: "control"
                        }]
                });
            });
        });
    </script>
</head>
<body>
    <div id="jsGrid"></div>
</body>
</html>