kendo实现栏目管理页面

最新推荐文章于 2020-03-09 23:29:10 发布

hljlthm

最新推荐文章于 2020-03-09 23:29:10 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/hljlthm/article/details/45440573

版权

今天的主要工作是完成了栏目管理，部门信息管理的页面部分。因为使用kendo控件，页面一些内容的实现相对简单一点，但是需要了解kendo控件，并且熟悉javaScript，自己的js水平有限，在根据之前的项目的参照和同事的帮助下才完成。知道了自己的不足，所以这段时间一定要抽出时间去系统的学习一下。下面是生成页面的一些js代码。

<body>

    <button class="k-button" onclick="xinzeng()">新增</button>
    <button class="k-button" onclick="xiugai()">修改</button>
    <button class="k-button" onclick="sahnchu()">删除</button>
    <div id="grid" class="mainright1"></div>
    <div id="lmtreeview" class="mainyou1"></div>
    <script>......</script>
</body>

js代码

<script>
    $(document).ready(function() {
        var data=[
                  {mc:"栏目1",yfbxx:"123",dspxx:"50",sfsc:"否",lc:"查看"},
                  {mc:"栏目1",yfbxx:"123",dspxx:"50",sfsc:"否",lc:"查看"},
                  {mc:"栏目1",yfbxx:"123",dspxx:"50",sfsc:"否",lc:"查看"},
                  {mc:"栏目1",yfbxx:"123",dspxx:"50",sfsc:"否",lc:"查看"},
                  {mc:"栏目1",yfbxx:"123",dspxx:"50",sfsc:"否",lc:"查看"}
                  ];
        $("#grid").kendoGrid({
            dataSource:data,columns: [
                                    {field: "mc",title: "名称",width: 100},
                                    {field: "yfbxx",title: "已发布信息",width: 100},
                                    {field: "dspxx",title: "待审批信息",width: 100},
                                    {field: "sfsc",title: "是否删除",width: 100},
                                    {field: "lc",title: "流程",width: 100}
                                ],
                                pageable: {
                                    refresh: true,
                                    pageSizes: true,
                                    buttonCount: 10,
                                    pageSize: 30,
                                    pageSizes: [20, 30, 40,100]
        },
        height: $(window).height()-18,
        sortable: true,
        selectable: "row",
        editable: "popup",
        schema: {
            data:   function (d) {  return d.data;  },
            total:  "total",
            model: {
                fields: {
                    mc: { type: "string" },
                    yfbxx: { type: "string" },
                    dspxx: { type: "string" },
                    sfsc: { type: "string" },
                    lc: { type: "string" },
                }
            }
        }
        });
        var data=[
                  {id:"hebgydx",text:"哈尔滨工业大学",expanded:false,value:"hebgydx",
                    items:[ 
                            {id:"mzrcap", text: "每周日程安排" ,value:"mzrcap"},
                            {id:"xxwj", text: "学校文件" ,value:"xxwj"},
                            {id:"qxtz", text: "全校通知" ,value:"qxtz"}
                          ]
                  },

                  {id:"xxbgs",text:"学校办公室",expanded:true,value:"xxbgs",
                        items:[ 
                                {id:"grcx", text: "个人查询" ,value:"grcx"},
                                {id:"bmcx", text: "部门查询" ,value:"bmcx"},
                              ]
                  },
                  {id:"jxyx",text:"教学院系",expanded:true,value:"jxyx",
                        items:[ 
                                {id:"hgxy", text: "化工学院",value:"hgxy",
                                    items:[
                                           {id:"hgxybgs",text:"化工学院办公室",value:"hgxybgs"}
                                           ]    
                                },
                                {id:"htxy", text: "航天学院",value:"htxy",
                                    items:[
                                           {id:"wxjsyjs",text:"卫星技术研究所",value:"wxjsyjs"},
                                           {id:"htgcx",text:"航天工程系",value:"htgcx"}
                                           ]

                                },
                                {id:"jdgcxy", text: "机电工程学院",value:"jdgcxy",
                                    items:[
                                           {id:"jxsjx",text:"机械设计系",value:"jxsjx"},
                                           {id:"htgcx",text:"航天工程系",value:"htgcx"}
                                           ]
                                }
                              ]
                  }
        ];
        function onSelect(e){
            var dataItem = this.dataItem(e.node);
             $.ajax({
                 url: dataItem.value,
                 dataType: "html",
                 type: "get",
                 contentType: "application/json",
             })
        }
        $("#lmtreeview").kendoTreeView({
            dataSource: data,
            id:"id",
            dataTextField: "text",                              
            select:onSelect
        });
    });
    function xinzeng(){
        var grid = $("#grid").data("kendoGrid");
        console.log(grid);

        grid.addRow();
    }
    function xiugai(){
        var grid = $("#grid").data("kendoGrid");
        var row = grid.select();
        var dataItem = grid.dataItem(row);

        if(dataItem!=null){
            grid.editRow(grid.select());
        }else{
            alert("请选择一个栏目");   
        }
    }
    function shanchu(){
        var grid = $("#grid").data("kendoGrid");
        var row = grid.select();
        var dataItem = grid.dataItem(row);
        if(dataItem!=null){
            grid.removeRow(grid.select());
        }else{
            alert("请选择一个栏目");   
        }
    }


</script>