-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample-tbl.js.htm
71 lines (71 loc) · 2.96 KB
/
example-tbl.js.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html>
<head>
<meta name="GENERATOR" content="Microsoft Visual Studio 2015">
<title>Example - tbl.js</title>
<script src="js/tbl.js"></script>
<!--<link href="css/tbl.css" rel="stylesheet" type="text/css" />-->
</head>
<body>
<div></div>
<div></div>
<div></div>
<div>
<button onclick="add()">ADD</button>
<button onclick="addg()">ADD GROUP</button>
<button onclick="insert()">INSERT</button>
<button onclick="bind()">BIND</button>
</div>
<div style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"></div>
<script>
var tb_data = [];
for (var i = 0; i < 106; i++) {
tb_data[i] = [Math.random()>0.5?true:false, Math.random(), "1970-01-01", Math.floor(Math.random()*10), i, 0];
}
tb_data[i] = "this is group"; i++;
tb_data[i] = ["this is text"]; i++;
for (; i < 578; i++) {
tb_data[i] = [i, Math.random(), "2017-02-01"];
}
var tb = new tbl(document.body.children[0], {
editable:true,select:tbl.single,must_select:true,paging:true,data:tb_data,page_size:15,
format: [
{ width: "5%", input: { type: "checkbox", check: "true" } },
{ width: "30%", name:"name", uneditable:true },
{ width: "20%", name:"date", input: { type: "date" } },
{ width: "10%", name:"select", input: {type:"select", options:[0,1,2,3,4,5,6,7,8,9]} },
{ width: "20%" },
{ width: "15%", input: {type:"radio", name:"only"}}
]
});
var tb2 = new tbl(document.body.children[1], {
editable: false,must_select:true,select:1,pagesize:3, maxheight: "300px", header: false, title: false, footer: true, data: [[1], [2, "remove"], ["nan - not a number", "del"], [4, "del"], [5, "del"]],
format: [
{ width: "90%", nancenter: true, input: {type:"text"}},
{ width: "10%", editable:true, input: { type: "button", value:"del", onclick: function () { tb2.delete(tb2.get_related_rowid(this));}}}
]
});
new tbl(document.body.children[2], { data: [["row1"], ["row2"]] });
var tb3 = new tbl(undefined, { format: [{ width: "50%" }, {width:"50%"}]});
with (document.body) { insertBefore(tb3.dom, firstChild) };
tb3.bind([["row1", "cell2"], ["row2"]]);
tb3.edit(0);
function add() {
tb.add(["abc", "bcd"]);
}
function addg() {
tb.add("测试组");
}
function insert() {
tb.insert([Math.random(), Math.random(), Math.random()], 0);
}
function bind() {
var tb_data = [];
for (var i = 0; i < 199; i++) {
tb_data[i] = [i, Math.random(), "2200-02-18"];
}
tb.bind(tb_data);
}
</script>
</body>
</html>