combogrid/test.html at master · VeHan/combogrid · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>combogrid</title>
    <script src="assets/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
    <link rel="stylesheet" href="assets/jquery-ui-1.11.4/jquery-ui.min.css">
    <script src="assets/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="assets/css/combogrid.css">
    <script type="text/javascript" src="assets/js/combogrid.js"></script>
    <script type="text/javascript">
    $(function() {
        combogrid.combogrid($('#d1'), {
            url: "data.json",
            columns: [{
                name: 'grade',
                width: '20%',
                title: '年级'
            }, {
                name: 'major',
                width: '20%',
                title: '专业'
            }, {
                name: 'class',
                width: '20%',
                title: '班级'
            }, {
                name: 'name',
                width: '20%',
                title: '姓名'
            }, {
                name: 'stuNum',
                width: '20%',
                title: '学号'
            }],
            onRowClick: function(rowData) {
                alert(rowData.name);
            }
        });
    });
    var isMask = fasle;
    function mask() {
       isMask = !isMask;
       combogrid.mask($('#d1'),isMask);
       if(isMask){
            $('button').html("不遮罩");
       }else{
            $('button').html("遮罩");
       }
    }
    </script>
</head>

<body>
    <div id="d1">
    </div>
    <button onclick="mask()">遮罩</button>
</body>

</html>