美文网首页
MiniUI----js动态创建datagrid表格

MiniUI----js动态创建datagrid表格

作者: wgq | 来源:发表于2018-11-09 13:59 被阅读0次

使用MiniUI的表格,有时需要通过js动态添加到页面,代码如下:

<div id="gridField"><div>

<script>

init();

function init() {
//列数据
var cols = [

        {type:"checkcolumn" },

        {field:"loginname", width:120, headerAlign:"center", allowSort:true, header:"员工账号", editor: {type:"textbox", minValue:0, maxValue:200, value:25} },

        {field:"age", width:100, headerAlign:"center", allowSort:true, header:"年龄", editor: {type:"spinner"} },

        {field:"birthday", width:100, headerAlign:"center", dateFormat:"yyyy-MM-dd H:mm", allowSort:true, header:"生日", editor: {type:"datepicker"} },

        {field:"remarks", width:120, headerAlign:"center", allowSort:true, header:"备注", editor: {type:"textarea"} },

        {field:"country", type:"comboboxcolumn", width:100, headerAlign:"center", header:"国家", editor: {type:"combobox", url:"../data/countrys.txt"} },

        {field:"married", trueValue:1, falseValue:0, type:"checkboxcolumn", width:60, headerAlign:"center", header:"婚否" }

]
//动态创建表格
var grid =new mini.DataGrid();

grid.set({

        url:"",

        style:"width:100%;height:100%;",

        id:"datagrid",

        columns: cols,

        multiSelect:true,

        allowResize:true,

        allowCellEdit:true,

        allowCellSelect:true,

        cellEditAction:"cellclick",

        allowRowSelect:true,

        showPager:true,

        editNextOnEnterKey:true,

        editNextRowCell:true

    });

    grid.render(document.getElementById("gridField"));

    var data = [{},{}];

    grid.setData(data);

}

</script>

相关文章

网友评论

      本文标题:MiniUI----js动态创建datagrid表格

      本文链接:https://www.haomeiwen.com/subject/pyxoxqtx.html