如何用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例子:

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

 

今天就到这了,下课

 

  

posted on 2017-07-24 17:18  Romayn  阅读(1463)  评论(0编辑  收藏  举报

导航