kendo ui之grid列表

最新推荐文章于 2023-11-25 10:36:16 发布

转载最新推荐文章于 2023-11-25 10:36:16 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuxing0705/p/3461992.html

文章标签：

#ui #json #javascript #ViewUI

本文介绍如何使用 Kendo UI 的 Grid 组件展示数据。通过 JavaScript 初始化 Grid，并配置数据源及列信息。实现包括服务器端分页、排序等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.test_grid.jsp

<html>
<head>
　　<%@ include file="/WEB-INF/jsp/common/top.jsp"%>
　　<meta http-equiv="Content-Type" content="text/html;">
　　<link href="<%=path%>/staticresources/css/test/test_grid.css" rel="stylesheet">
　　<script type="text/javascript" src="<%=path%>/staticresource/js/test/test_grid.js"></script>
</head>
<body>
　　<div id="grid"></div>
</body>
</html>

2.test_grid.js$(document).ready(function() {rgs=$("#target").val();

    createGrid(args);
});
function createGrid(value){
     var dataSource=new kendo.data.DataSource({
     transport:{
           read:{
                type:"post",
                url:   path+"^_^";
                contentType:"application/json;"
                dataType:"json"
    },    
    parameterMap:function(options,operation){
       if(operation=="read"){
             if(value!='null'&&value!=undefined&&value!='')
                options['^*^']=value;
             }
             return json.stringify(options);
       }
    }, 
    pagesize:^_^,
    schema:{
        data : function(d) {
          return d.data;
        },
        total : function(d) {
          return d.total;
        },
        model : {
        id : "id",
        fields : {
                 text : {
                 type : "string"
                 }
                }
        }
    },
    serverPaging:true,
    serverFiltering:false,
    serverSorting:false,
    change:function(){
     (#_#);
    }
    });

    $("#grid").kendoGrid({
        dataSource : dataSource,
        sortable : true,
        selectable : "row",
        change : function() {
            (#_#);
        },
        pageable : {
            refresh : true,
            pageSizes : true
        },
        columns : [{
           hidden : true,
　　　　    field : "id",
　　　　　　 title : "id",
         },{
　　　　　　 field : "text",
           title : text,

           }],
        toolbar : [ {
            template :        kendo.template($("#toolBarTemplate").html())
        } ],
        cancel : function(e) {
            e.preventDefault();
        }
    });
}