使用jQuery+Bootstrap+ShieldUI构建可内置编辑的响应式表格控件

Editable Grid with jQuery, Bootstrap, and ShieldUI-Lite Source: http://www.sitepoint.com/editable-grid-jquery-bootstrap-shield-ui-lite

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3963
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    $("#grid").shieldGrid({
        dataSource: {
            data: gridData,
            schema: {
                fields: {
                    id: {
                        path: "id",
                        type: Number
                    },
                    age: {
                        path: "age",
                        type: Number
                    },
                    name: {
                        path: "name",
                        type: String
                    },
                    company: {
                        path: "company",
                        type: String
                    },
                    month: {
                        path: "month",
                        type: Date
                    },
                    isActive: {
                        path: "isActive",
                        type: Boolean
                    },
                    email: {
                        path: "email",
                        type: String
                    },
                    transport: {
                        path: "transport",
                        type: String
                    }
                }
            }
        },
        rowHover: false,
        columns: [{
            field: "name",
            title: "Person Name",
            width: "120px"
        }, {
            field: "age",
            title: "Age",
            width: "80px"
        }, {
            field: "company",
            title: "Company Name"
        }, {
            field: "month",
            title: "Date of Birth",
            format: "{0:MM/dd/yyyy}",
            width: "120px"
        }, {
            field: "isActive",
            title: "Active"
        }, {
            field: "email",
            title: "Email Address",
            width: "250px"
        }, {
            field: "transport",
            title: "Custom Editor",
            width: "120px",
            editor: myCustomEditor
        }, {
            width: "104px",
            title: "Delete Row",
            buttons: [{
                cls: "deleteButton",
                commandName: "delete",
                caption: "<img src='http://www.prepbootstrap.com/Content/images/template/BootstrapEditableGrid/delete.png' /><span>Delete</span>"
            }]
        }],
        editing: {
            enabled: true,
            event: "click",
            type: "cell",
            confirmation: {
                "delete": {
                    enabled: true,
                    template: function(item) {
                        return "Delete row with ID = " + item.id
                    }
                }
            }
        },
        events: {
            getCustomEditorValue: function(e) {
                e.value = $("#dropdown").swidget().value();
                $("#dropdown").swidget().destroy();
            }
        }
    });

function myCustomEditor(cell, item) {
        $('<div id="dropdown"/>')
            .appendTo(cell)
            .shieldDropDown({
                dataSource: {
                    data: ["motorbike", "car", "truck"]
                },
                value: !item["transport"] ? null : item["transport"].toString()
            }).swidget().focus();
    }
});

编译

CSS

HTML

<div class="page-header">
        <h1>An Editable Grid with jQuery, Bootstrap, and Shield UI Lite</h1>
    </div>

<div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="text-center">Click inside any of the content cells to edit the grid.<span class="fa fa-edit pull-right bigicon"></span></h4>
            </div>
            <div class="panel-body text-center">
                <div id="grid"></div>
            </div>
        </div>
    </div>
</div>

Editable Grid with jQuery, Bootstrap, and ShieldUI-Lite Source: http://www.sitepoint.com/editable-grid-jquery-bootstrap-shield-ui-lite

编辑器支持Emmet

快捷键

Editable Grid with jQuery, Bootstrap, and ShieldUI-Lite Source: http://www.sitepoint.com/editable-grid-jquery-bootstrap-shield-ui-lite

使用three.js和PlaneBufferGeometry构建的3d交互波浪背景动画

three.js使用NURBSSurface构建曲面代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：