kendo UI使用基础介绍与问题整理——Grid问题/demo参数datafilter等

Posted 2020-10-20 lindacai

    项目中用到最多的组件是Grid，与它相关的问题也是最多的，下面我会成几个文章来说明。

    这篇文章会介绍一些相关的常用参数。

 

一、demo及基本的参数说明

   简单代码范例demo：

    <div id="grid"></div>

    <script>
       $(document).ready(function() {
       var data=[{ id:"1", cause:"包装破损", quantity:"5",description:"" },
                 { id:"2",cause:"包装破损", quantity:"2",description:"" }];  //json数据 本地
       $("#grid").kendoGrid(
          dataSource: {                        //数据源                                                                      
            data:data,           
            schema: {
                model: { id: "Id" }       
            }
        },
        persistSelection: true,              //允许选择
        columns: [                                //列  
                     {
                         selectable: true,             //选择列
                         width: "50px"                 //列宽
                     }, {
                         field: "id",                       //数据源中id的数据    
                         title: "id",                        //列名    
                         hidden: true                   //隐藏此列     
                     }, {
                        field: "cause",                 //数据源中cause的数据   
                        title: "差异原因"
                    },  {
                        field: "quantity",
                        title: "差异数量"
                    }, {
                        field: "description",
                        title: "差异描述"
                    }
        ]
    }).data("kendoGrid");

   });
    </script>

 

下面是项目中用到的grid列表的代码（带分页，带工具条）：

//html

<div id="grid"></div>

<script type="text/x-kendo-template" id="template">
　　<div class="toolbar">
　　　　<div class="form-group">
　　　　　　<label class="label-inline"单号：</label>
　　　　　　<input type="text" id="Code" class="form-control input-ssm" spellcheck="false" maxlength="30" />
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label class="label-inline">创建开始时间：</label>
　　　　　　<input type="text" id="startTime" class="form-control input-ssm" />
　　　　</div>
　　　　　　到
　　　　<div class="form-group">
　　　　　　<input type="text" id="endTime" class="form-control input-ssm" />
　　　　</div>
　　　　<button class="btn-cy btn-search" onclick="search()"><i class="fa fa-search"></i>查询</button>
　　　　<button class="btn-cy btn-search" onclick="reset()"><i class="fa fa-refresh"></i>重置</button>
　　</div>
</script>



//JS

<script>
$("#grid").kendoGrid({
        dataSource: {
            transport: {                                    //请求数据       
                read: {                                       
                    type: "post",
                    url: "/GetList",
                    dataType: "json"
                }
            },
            pageSize: 10,                         //每页数据条数      
            serverPaging: true,                //服务器提供分页  
            schema: {
                data: function (d) { return d.data; },
                total: function (d) { return d.total; },                          
                model: { id: "Id" }
            }
        },
        dataBound: function () {                                    //数据加载后执行的事件 
            if ( !this.dataSource.data().length) {               
                var clos = this.dataSource.options.fields.length + 1;
                this.tbody.append(‘<tr class="no-data"><td colspan="‘ + clos + ‘">没有找到相关数据</td></tr>‘);
            } else {
                this.tbody.find(".no-data").remove();
            }
        },
        excel: {                     //excel
            allPages: true         //设置导出所有页面，默认导出excel的当前页面
        },
        pageable: true,            //分页
        toolbar: kendo.template($("#template").html()),           //工具栏
        persistSelection: true,                                   //是否可以多选
        pageable: {
            refresh: true,
            pageSizes: false,
            buttonCount: 5,
            input: true,
            numeric: false,
            messages: {
                display: "{0} - {1} 共 {2} 条数据",
                empty: "没有数据",
                of: "共<span class=‘z-allPage‘>{0}</span>页 ",
                page: "&nbsp;&nbsp;&nbsp;到第",
                first: "第一页",
                previous: "前一页",
                next: "下一页",
                last: "最后一页",
                refresh: "刷新"
            }
        },
        columns: [
            {
                selectable: true,
                width: "50px"
            },
            {
                template: "<a href=‘/Detail/#: Id #‘>  #: Code # </a>",
                field: "Code",
                title: "编号",
                width: 230
            },
            {
                field: "Name",
                title: "名称",
                minResizableWidth: 220,
                headerAttributes: {
　　　　　　　　　　　　style: "text-align: left;" //列标题居左
　　　　　　　　　　},
                attributes: {
                    style: "text-align: left;" //列内容居左
                }
            },
            {
                field: "TypeStr",
                title: "类型",
                width: 100,
            },
            {
                field: "StateName",
                title: "国家",
                width: 100
            },
            {
                field: "ProvinceName",
                title: "省份",
                width: 100
            },
            {
                field: "CityName",
                title: "城市",
                width: 100
            },
            {
                field: "RegionStr",
                title: "所属区域",
                width: 90
            },
            {
                field: "LastModifierUserName",
                title: "最后修改人",
                width: 90
            },
            {
                field: "LastModificationTimeStr",
                title: "修改时间",
                width: 120
            },
            {
                field: "StatusStr",
                title: "状态",
                width: 70
            },
            {
                template: ‘<div class="btn-group">\                                                                //可以自定义列的显示
                                         <button type="button" class="btn btn-danger dropdown-toggle"  data-toggle="dropdown">操作<span class="caret"></span></button>                                         <ul class="dropdown-menu">                                         <li><a href="/Manage/Warehouse/Detail/#: Id #">查看</a></li>                                         <li><a href="/Manage/Warehouse/CreateOrEditModal/#: Id #">修改</a></li>                                         <li role="separator" class="divider"></li>                                         <li><a href="javascript:void(0)" onclick="SaveGridExcel(#: Id #,\‘档案_编号#: Code #\‘)">导出</a></li>                                         </ul></div>‘,
                title: ‘操作‘,
                width: ‘100px‘
            }
        ]

    });
</script>

 

下面对上面的gird用到的一些方法所涉及到的一些问题进行说明。

1 dataBound 

这个参数能够对grid加载时进行一些处理，如上面用到的“在表格没有数据的情况下给出提示”，并且可以直接通过this来获取当前表格的grid对象。

除了上面用到的一个demo，还可以在databound里添加一些自己需要的其他功能，如给表格加动态的行号，还有给表格里的一些内容添加一些初始化组件等。

 

2 columns的template

它是自定义显示的列，上面使用的是 template: "<a href=‘/Detail/#: Id #‘> #: Code # </a>", 这是给这一列显示的数据添加了一个链接；

还可以这样使用：

template: function (e) {
                     if (e.IsHave== true) {
                         return "是";
                     }
                     else if (e.IsHave == false) {
                         return "否";
                     }
                 }

 

其他的参数应该会从上面的demo中理解使用方法。

========================================================================

 

二、grid关于data和dataSource的相关方法

项目中会涉及到通过本地js读取grid列表中数据的方法，不过这里目前发现是存在一个问题，就是分页显示分时候，没有办法通过js获取到全部data，只能获取到当前页的data，所以下面只对不分页的情况进行整理。

演示grid demo：

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }  
  ],
  dataSource: [
    { name: "Jane Doe", age: 30},
    { name: "John Doe", age: 33},
  ]
});

 

1、data   

$("#grid").data("kendoGrid").dataSource.data();

 

2、data - 取数据

    取出某一行数据  

//方法1：   
$("#grid").data("kendoGrid").dataSource.data()[0];  :

//方法2：
$("#grid").data("kendoGrid").dataItem("tbody tr:eq(0)");

//方法3：
$("#grid").data("kendoGrid").dataSource.at(0);

    取出某一行数据中的某一列：

//方法1： 
$("#grid").data("kendoGrid").dataSource.data()[0].Id;

//方法2： 
 $("#grid").data("kendoGrid").dataItem("tbody tr:eq(0)").Id;

//方法3： 
$("#grid").data("kendoGrid").dataSource.at(0).Id;

 

3、data - 增加

添加一条数据：

var grid = $("#grid").data("kendoGrid");
grid.dataSource.add({ name: "John Doe", age: 33 }); //add只能添加一条数据

4、data - 修改

修改某行数据：

var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.at(0);  //取第一条数据
data.set("name", "John Doe");      //修改第一条数据 

5、data - 删除

 var grid = $("#grid").data("kendoGrid");
 var data = grid.dataSource.at(0); //取第一条数据
 grid.dataSource.remove(data);     //删除第一条数据

 

6、dataSource数据源 - 修改

var dataSource = new kendo.data.DataSource({
         data: [
           { name: "John Doe", age: 33 }
         ]
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);

 

说明：需要先创建一个DataSource，然后通过setDataSource方法进行设置。

dataSource也可以这样设置

var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "post",
url: "/getData",
dataType: "json"
}
},
batch: true,
schema: {
data: function (d) {
return d.data;
},
model: { id: "Id"}
},
serverFiltering: true,
filter: sqlSource
});

 

7、total：统计grid列表数据的总条数

方法：

$("#grid").data("kendoGrid").dataSource.total()

说明：统计grid列表数据的总条数（包含所有页面的数据）

 

注：$("#grid").data("kendoGrid").dataSource.data().length 这条语句也能统计grid数据的条数，但是仅限于当前页面，不包含所有页面。因此这种方法仅适用于不带分页的场景。

$("#grid").data("kendoGrid").dataSource.total()这种方法相对来说更具优势。

 

三、filter 自定义查询条件

注：需要配合后台来实现此功能

 

用法demo：

var Code = $("#Code").val().replace(/\s+/g, "");
var Name = $("#Name").val().replace(/\s+/g, "");
var dataSource = []; //dataSource是json数组，用来放查询的条件
if (Code != "") {
dataSource.push({ field: "Code", operator: "eq", value: Code });
}
if (Name != "") {
dataSource.push({ field: "Name", operator: "contains", value: Name });
}
$("#grid").data("kendoGrid").dataSource.filter(dataSource);

 

 说明，由于项目的原因，kendo自身基础的filter是在列表中的那种，而是放在kendo的工具栏中，所以采用了自定义搜索框，然后将输入的搜索条件拼成一个对象数组，然后再传过去。