kendo grid、kendo excel相关方法

一、kendo grid

1、grid设置复选框列

dataSource= new kendo.data.DataSource({schema: {model: {fields: {checkboxCol: {defaultValue: 'N', type: 'boolean', checkedValue: 'Y', uncheckedValue: 'N'}}}}});

2、grid LOV

       columns: [{field: "entityId",title: '<@spring.message "entity.entityCode"/>',headerAttributes: { style: "text-align: center" },//标题样式attributes: {style: "text-align:center"},//单元格样式width: 120,//宽度可以为数字或者百分比，百分比要加引号//编辑完成事件template: function(item){return item['entityCode']||''},//编辑事件editor: function (container, options) {$('').appendTo(container).kendoLov($.extend(<@lov "PSPC_PSPC_ENTITY_SAMPLE"/>, {textField: 'entityCode',//指定显示值valueField: 'entityId',//指定真实值model: options.model},{query: function (e) {//查询事件e.param['tenantId'] = '-1';e.param['siteId'] = '-1';},select: function (e) {//选择LOV事件，同时填充其他列的值options.model.set('description', e.item.description);options.model.set('entityVersion', e.item.entityVersion);options.model.set('ceGroup', e.item.ceGroup);options.model.set('ceParameter', e.item.ceParameter);options.model.set('attachmentGroupDescription', e.item.attachmentGroupDescription);}}));}}]

3、grid fasecode

columns: [{field: "coordinateAxis",title: '<@spring.message "entitychart.coordinateAxis"/>',attributes: {style: "text-align:center"},headerAttributes: { style: "text-align: center" },width: 120,template: function (dataItem) {//对比快码集合获取含义var v = dataItem.coordinateAxis ? dataItem.coordinateAxis : "";$.each(PSPC_TICK_LABEL, function (i, n) {if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {v = n.meaning;return false;}})return v;},editor: function (container, options) {$('').appendTo(container).kendoDropDownList({dataTextField: "meaning",dataValueField: "value",valuePrimitive: true,dataSource: PSPC_TICK_LABEL});}}]

4、grid 只读列

       columns: [{field: "description",title: '<@spring.message "entity.description"/>',headerAttributes: { style: "text-align: center" },width: 120,editor: function (container, options) {//编辑事件返回一个spanvar val = options.model.description == null ? '' : options.model.description;$('' + val + '').appendTo(container);}}]

       schema: {model: {editable: function (col) {//站点只有新增可以修改，审核状态/有效性不允许修改if ('siteId' === col) {//站点只有新增可以修改return this.isNew();} else {//审核状态/有效性不允许修改return !('checkStatus' === col || 'enableFlag' === col);}}}}

5、grid 时间列

       columns: [{field: "startDate",title: '<@spring.message "entity.startdate"/>',width: 150,attributes: {style: "text-align:center"},headerAttributes: {style: "text-align:center"},format:"{0:yyyy-MM-dd HH:mm:ss}",editor: function (container, options) {//获得结束时间var end = options.model.endDate;var opts = {format: "yyyy-MM-dd HH:mm:ss"}if (end) {opts.max = end;}$('').appendTo(container).kendoDateTimePicker(opts);}},{field: "endDate",title: '<@spring.message "entity.enddate"/>',width: 150,attributes: {style: "text-align:center"},headerAttributes: {style: "text-align:center"},format:"{0:yyyy-MM-dd HH:mm:ss}",editor: function (container, options) {//获得开始时间var start = options.model.startDate;var opts = {format: "yyyy-MM-dd HH:mm:ss"}if (start) {opts.min = start;}$('').appendTo(container).kendoDateTimePicker(opts);}}]

6、grid bind

    $("#grid").kendoGrid({autoBind: false,//是否自动绑定dataSource: dataSource,resizable: true,scrollable: true,//是否可滚动navigatable: false,rownumber: true,//显示行号selectable: 'multiple, rowbox',//复选框列 去掉multiple为单选框列dataBound: function () {if (parent.autoResizeIframe) {parent.autoResizeIframe('${RequestParameters.functionCode!}')}},columns:[],editable: {createAt: "bottom"//新增行位于最下方，默认上方}});

7、grid 冻结列

columns = [{field: "oocId",title: '<@spring.message "ooc.oocid"/>',width: 120,hidden: true,locked:true,//是否冻结 true:是 false:否attributes: {style: "text-align:center;"},headerAttributes: {style: "text-align:center"}},{field: "entityCode",title: '<@spring.message "ooc.entitycode"/>',width: 120,locked:true,attributes: {style: "text-align:center;"},headerAttributes: {style: "text-align:center"}},{field: "entityDesc",title: '<@spring.message "ooc.entitydesc"/>',width: 120,attributes: {style: "text-align:center;"},headerAttributes: {style: "text-align:center"}},]

8、grid 操作列

{field: "",title: '<@spring.message "hap.action"/>',width: 120,attributes: {style: "text-align:center;"},headerAttributes: {style: "text-align:center"},template:function (dataItem) {return '' +'编辑' +'   ' +'展示图';}}

9、grid前台分页

后台：
查询全部数据，不进行分页前台：dataSource = new kendo.data.DataSource({serverPaging: false,});数据查询：
var viewModel = kendo.observable({model: {},query:function () {//必输校验if(!viewModel.model.startDate || !viewModel.model.endDate){kendo.ui.showInfoDialog({message: '请选择开始时间和结束时间'});return;}//查询，如果只用page(1)不会查询数据库，只会加载当前查询结果$("#grid").data('kendoGrid').dataSource.read();//重新查询数据库$("#grid").data('kendoGrid').dataSource.page(1);//加载第一页}});数据捞取：
var allDatas = dataSource.data();//获取所有数据
var gridItems = $("#grid").data("kendoGrid").items();//获取当前页的数据
var checked = $("#grid").data("kendoGrid").selectedDataItems();//获取勾选的数据

二、kendo excel

              //创建工作册var workbook = new kendo.ooxml.Workbook({sheets: [{name: 'sheetName1',//sheet页名称frozenRows: 2,//行冻结 索引从1开始frozenColumns: 1,//列冻结 索引从1开始mergedCells: ["A1:G1","C15:E15"],//单元格合并filter: { from: 0, to: 18 },//筛选列 索引从0开始columns: [{width: 120},{width: 120}],rows: [{ cells: [{textAlign: "center", value: 'code1', background: '#7A7A7A', color: '#FFF'},{textAlign: "center", value: 'desc1'}]},{ cells: [{textAlign: "center", value: 'code2'},{textAlign: "center", value: 'desc2'}]}]},{name: 'sheetName2',//sheet页名称frozenRows: 1,//行冻结 索引从1开始frozenColumns: 2,//列冻结 索引从1开始mergedCells: ["A1:G1","C15:E15"],//单元格合并filter: { from: 0, to: 18 },//筛选列 索引从0开始columns: [{width: 120},{width: 120}],rows: []}]});//保存为excel文件kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: 'Excel导出.xlsx' });

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！