webix学习1

最新推荐文章于 2022-03-20 19:34:42 发布

qq_26229765

最新推荐文章于 2022-03-20 19:34:42 发布

阅读量2.7k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在CSDN某一期新闻中看到了webix的介绍，看了一下，觉得很有趣，想学习一下，简单记录一下的学习过程（其实基本上都是官网的教程和demo中的代码... ...）

webix通过rows来定义行：

<!DOCTYPE html>
<html>
<head lang="en">

    <link rel="stylesheet" href="css/webix.css" type="text/css">
    <script src="js/webix_debug.js" type="text/javascript"></script>
    <!-- 注意引用路径 -->
    <meta charset="UTF-8">
    <title>webix</title>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        /* place for webix.ui */
        webix.ui({
            width:800,
            rows:[
                { view:"template",
                    type:"header", template:"My App!" },
                { view:"datatable",
                    autoConfig:true,
                    editable:true,
                    data:{
                        title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5
                    }
                }
            ]
        });
    </script>
</body>
</html>

效果还不错

下面是简单的增删改的例子（注意引用路径）

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="../css/webix.css" type="text/css">
    <script src="../js/webix_debug.js" type="text/javascript"></script>
    <!-- 注意引用路径 -->
    <meta charset="UTF-8">
    <title>webix</title>
    <script type="text/javascript" charset="UTF-8">
        var filmset = [
            { id:1, title:"The Shawshank Redemption", year:1994},
            { id:2, title:"The Godfather", year:1972},
            { id:3, title:"The Godfather: Part II", year:1974},
            { id:4, title:"The Good, the Bad and the Ugly", year:1966},
            { id:5, title:"My Fair Lady", year:1964},
            { id:6, title:"12 Angry Men", year:1957}
        ];
        webix.ready(function(){
            webix.ui({
                rows: [
                    { view:"toolbar", id:"mybar", elements:[
                        { view:"button", value:"Add", width:70, click:add_row},
                        { view:"button", value:"Delete", width:70 ,click:delete_row},
                        { view:"button", value:"Update", width:70 ,click:update_row},
                        { view:"button", value:"Clear Form", width:85,click:"$$('myform').clear()"}]
                    },
                    { cols:[
                        {view:"form", id:"myform", width:200, elements:[
                            { view:"text", name:"title", placeholder:"Title", width:180, align:"center"},
                            { view:"text", name:"year", placeholder:"Year", width:180, align:"center"} ]
                        },
                        {
                            view:"list",
                            id:"mylist",
                            template:"#title#. Shot in#year#",
                            select:true, //enables selection
                            height:400,
                            data: filmset
                        }
                    ]}
                ]
            });
            $$("mylist").attachEvent("onAfterSelect", function(id){
                $$("myform").setValues({
                    title: $$("mylist").getItem(id).title,
                    year: $$("mylist").getItem(id).year
                });
            });
            function add_row() {
                $$("mylist").add({
                    title: $$("myform").getValues().title,
                    year: $$("myform").getValues().year
                })
            }
            function delete_row() {
                var id = $$("mylist").getSelectedId(); //returns the ID of selected item
                webix.confirm({
                    title: "Delete",
                    text: "Are you sure you want to delete the selected contact?",
                    callback: function(result) {
                        if (result) {
                            $$("mylist").remove(id);
                        }
                    }
                });
            }
            function update_row() {
                var sel = $$("mylist").getSelectedId();
                if(!sel) return;

                var value1 = $$('myform').getValues().title;
                var value2 = $$('myform').getValues().year;

                var item = $$("mylist").getItem(sel); //selected item object
                item.title = value1;
                item.year = value2;
                $$("mylist").updateItem(sel, item);
            }
        })
    </script>
    <script>

    </script>
</head>
<body>

</body>
</html>

webix源码和官方DEMO下载：

http://download.csdn.net/detail/qq_26229765/9252987

qq_26229765

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webix学习1

在CSDN某一期新闻中看到了webix的介绍，看了一下，觉得很有趣，想学习一下，简单记录一下的学习过程（其实基本上都是官网的教程和demo中的代码... ...）webix通过rows来定义行： webix /* place for webix.ui */ webix.ui(
复制链接

扫一扫