如何用jQuery做一个表格组件

同事问我如何用jquery做一个表格控件，他百度到一个用html制作表格，用jquery操作的表格并不是很好的方案，
给他做个了演示Demo
　　

html：

　　<div id="grid"></div>

js：

  $("#grid").datagrid({
        width: 600,
        height: 400,
        columns: [
            { text: "名称", field: "name", width: 200 },
            { text: "年龄", field: "age" },
            { text: "日期", field: "birthday",
                renderer: function (value, row, col) {
                    if (value && value.getFullYear) {
                        value = value.getFullYear() + "-" + (value.getMonth() + 1) + "-" + value.getDate();
                    }
                    return value;
                }
            }
        ],
        data: [
            { name: "name1", age: 20, birthday: new Date() },
            { name: "name1", age: 20, birthday: new Date() },
            { name: "name1", age: 20, birthday: new Date() },
            { name: "name1", age: 20, birthday: new Date() },
            { name: "name1", age: 20, birthday: new Date() }
        ]
    });

    function addRow() {

        var grid = $("#grid").data("datagrid");
       
        grid.addRow({ name: "bbb" });
    }

    function setColumns() {
      
        var grid = $("#grid").data("datagrid");
        grid.setColumns([
            { text: "Name", field: "name", width: 150 },
            { text: "Age", field: "age", width: 150 }
        ]);
    }

demo例子：

http://files.cnblogs.com/files/romayn/jqeury.zip

 

今天就到这了，下课

 

　　

转载于:https://www.cnblogs.com/romayn/p/7230002.html