관리 메뉴

moozi

grid.html 본문

TIS_2016/HTML5_3기

grid.html

moozi 2016. 8. 12. 11:41

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Grid - w2ui</title>

    <link rel="stylesheet" href="css/w2ui-1.4.3.css">

<!--

    <link rel="stylesheet" href="css/w2ui-1.2.css">

    -->

     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>


    <script src="js/w2ui-1.4.3.js"></script>

<!--     <script src="js/w2ui-1.2.js"></script>-->

    <style>

        #grid1{

            margin:0 auto;

            width:760px;

            height:200px;

        }

    </style>

    <script>

        $(document).ready(function(){

            $("#grid1").w2grid({

                name:"grid",

                show:{

                    header:true,

                    toolbar:true,

                    footer:true,

                    lineNumbers:true,

                    toolbarSearch:true,

                    selectColumn:true

                },

                columns:[

                    {field:"name",caption:"도서명",size:"40%",editable:{type:"text"}},

                    {field:"author",caption:"저자",size:"20%",editable:{type:"text"}},

                    {field:"publisher",caption:"출판사",size:"20%",editable:{type:"text"}},

                    {field:"price",caption:"가격",size:"20%",editable:{type:"text"}},

                ],

                records:[

                    {recid:1,

                     name:"HTML5의 정석",

                     author:"김정석",

                     publisher:"조은출판사",

                     price:30000

                    },

                    {recid:2,

                     name:"CSS3의 정석",

                     author:"박정석",

                     publisher:"조은출판사",

                     price:35000

                    },

                    {recid:3,

                     name:"javascript의 정석",

                     author:"이정석",

                     publisher:"나은출판사",

                     price:15000

                    }

                ]

            });

        });

    

    

    

    

    </script>

</head>

<body>

    <div id="grid1"></div>

</body>

</html>

'TIS_2016 > HTML5_3기' 카테고리의 다른 글

modal.html, loader.html  (0) 2016.08.12
accordion.html  (0) 2016.08.12
datepicker  (0) 2016.08.12
ajax연습문제04  (0) 2016.08.11
jquery연습문제풀이  (0) 2016.08.11
Comments