使用MiniUI的表格嗅剖,有時(shí)需要通過js動(dòng)態(tài)添加到頁面根蟹,代碼如下:
<div id="gridField"><div>
<script>
init();
function init() {
//列數(shù)據(jù)
var cols = [
{type:"checkcolumn" },
{field:"loginname", width:120, headerAlign:"center", allowSort:true, header:"員工賬號(hào)", 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:"國(guó)家", editor: {type:"combobox", url:"../data/countrys.txt"} },
{field:"married", trueValue:1, falseValue:0, type:"checkboxcolumn", width:60, headerAlign:"center", header:"婚否" }
]
//動(dòng)態(tài)創(chuàng)建表格
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>