KendoUI —— data management 类组件 Grid 表格

分手后的思念是犯贱 2022-06-12 06:37 225阅读 0赞

**一、效果展示**

**二、基础学习**

1、组件基础引用js与css

2、语法

$("#id").kendoGrid({ 属性设置列表 });

**三、属性**

1、dataSource了与 schema 属性

数据源，可以是本地数据（如：json对象数组）或远程数据（如：访问REST 服务返回json数据）

下面是自己测试成功的模板（官网给的不可用！）：

<div id="grid1"></div>
    <div id="grid2"></div>
    <script>
        var people = [ { firstName: "John",lastName: "Smith",email: "john.smith@telerik.com" } ];
        $(document).ready(function () {
    	//加载本地数据
        	$("#grid").kendoGrid({ dataSource:people});  	//设置数据源为本地json对象数组，表头即属性firstName、lastName、Email	
            //重点:加载远程数据
    	$("#grid").kendoGrid({ 
                dataSource:{
    		transport:{
    		    read:{
    		        url:"REST_URL"，		//REST_URL 为返回json对象数组的REST 服务
    			dataType:"json"			//REST 服务一般返回json
    		    }
    		},		
    		schema:{
    		    data:"dataName",			//必须属性，dataName为我们使用的json对象数组
    		    model:{
    			//字段映射与解析
    		        fields:{
    			    fieldName1:{type:"string|number|date"}
    			    fieldName2:{type:"string|number|date"}
    			    ……
    			}
        	 	    }	
    		}
    	    },
    	    //字段与表格表头的映射
    	    columns：[
    		{field:"fileName1",title:"第一列的表头"},
    		{field:"fileName2",title:"第二列的表头"}
    		……
    	    ]
    	    //其它设置
            });  
       });
    </script>

**说明：**  
1）、本地dataSource，不能为json对象，只能为json对象数组，且json对象不能嵌套！  
2）、远程的dataSource，必须指定与transport 对应的schema，表示使用的具体数据；  
3）、schema 的 data属性值为 REST 服务返回对象的JSON 对象数组名，因为REST 返回的实际是一个Object 对象，该对象里面包含了counts、fields、\_proto\_ 三个属性，其中fields 是一个json对象数组（它的名字应该与我们具体定义的Controller映射路径有关），也即我们真正需要的数据。  
  
  
**先测试下：**  
第一步：  
SpringMVC 工程Test 中定义了一个REST Service，其某个方法的绝对访问路径为：http://localhost:8082/Test/service/request/fields，它查找数据库设置model后，返回一个MappingJacksonJsonView 对象。  
第二步：  
浏览器测试访问该服务，并查看具体返回的数据。

测试代码：

var obj2;
    $.get(  
    	"service/request/fields",  
    	function(data){ obj2=data };
    	"json"
    );

**结果：**

![Center][]

可见，返回的是Object，而我们需要的是fields的json对象数组，所以不能直接使用。  
第三步：  
生成最基础的表格，测试关键js代码：

//#test_grid为一个空div
    var grid=$("#test_grid").kendoGrid({
        dataSource:{
            transport : {
    	    read : {
    		url : "service/request/fields",
    		dataType : "json"
    	    }
    	},
    	schema: {
    	    data:"fields",
                    model: {
                        fields: {
                            id: { type: "string" },
                            name: { type: "string" }
                        }
                    }
            }
        },
        height: 300,//没有width属性，因为通常是在div中生成表格，而div为块元素
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            {field:"name",title:"Name",width:50},
            {field:"id",title:"ID",width:50}
        ]
    });

**结果：**

![Center 1][]

所有的记录都在展示在同一个表格中，左下角的按钮样式不对（说明没有引用某个css文件），且数据没有进行分页，右下角显示no items to display。

第四步：

修改data 属性值，代码为：

同时引入kendo.default.min.css，则结果为：

![Center 2][]

若上面改为引入kendo.bootstrap.min.css，则结果样式为：

![Center 3][]

**四、总结**

1、关于引用的js 与css 文件

必须引用：

说明：

对组件比较熟悉时，可不引用kendo.all.min.js而只引用用到的组件的js。对kendo.default.min.css同理，可替换为bootstrap风格的kendo.bootstrap.min.css或其它风格的css。

2、数据字段格式  
格式有string、number、date等，都可对显示的数据格式进行控制。如：

columns: [
    	{field:"stringType",title:"字符串类型",width:100},
    	{field:"numberType",title:"数字类型",width:100},
    	{field:"dateType", title:"日期类型",width:100}
    ]

3、数据绑定

作用：

实现：

4、较完整可重用示例

代码：

效果：

[Center]: /images/20220612/d2087d033dd948e3b2ef6c772fe23a50.png
[Center 1]: /images/20220612/6c7a7a4a1f094dc295b69387b80e8417.png
[Center 2]: /images/20220612/5e04a5b98083468fb2c52b89c6de8e2d.png
[Center 3]: /images/20220612/9cae4e75b0654e3bba825553fbd2da6d.png