kendo ComboBox显示多列数据（自定义样式）

来源：互联网发布：oracle单条数据被锁编辑：程序博客网时间：2024/04/30 10:59

项目中经常要求在ComboBox 中显示多列，方便查看更多的信息，查看了kendo combobox发现其中是有个template的样式，

可以自定义样式，以及显示的风格；

这就是kendo Demo中的样式了。以下实现自己的样式：先上图

先上css样式：

.dropdown-header {font-size: 1.2em;padding: 0 0;width:auto;}.dropdown-header > span {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;text-align: left;display: inline-block;border-style: solid;border-width: 0 0 1px 1px;margin-left:0PX;padding: .1em .6em;width: 78%;}.dropdown-header > span:first-child {width: 22%;border-left-width: 0;}Democombo-list .k-item > span{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; border-style: solid; border-width: 0 0 0px 0px; vertical-align: top; min-height: 78%;  width: 78%; padding: .6em 0 0 .6em;}Democombo-list .k-item > span:first-child{width: 22%; border-left-width: 0; padding: .6em 0 0 0;  border-width: 0 0 0 0;}

接着就是kendo combobox:

$("#DemoCombo").kendoComboBox({        filter: "contains",        dataTextField: 显示的字段名,        dataValueField: value字段名,        headerTemplate: '<div class="dropdown-header">' +                '<span class="k-widget k-header">省份ID</span>' +                '<span class="k-widget k-header">备注（说明）</span>' +            '</div>',        template: '<span class="k-state-default">#: data.显示的字段名 #</span>' +                  '<span class="k-state-default">#: data.value字段名 #</span>',        dataSource: DATASOURCE,        height: 370    });$("#DemoCombo-list").width(350);

希望有更好的方法，一起交流。群：364125779

0 0