技术文档

1. grid

1.1.grid与checkbox结合使用
效果展示

代码实现

1.2.grid默认勾选

按照指定行默认勾选
Find(“tr:eq(index)”)

1.3.获取grid当前所有的行及当前行的索引

当前行的索引

每次勾选checkbox时触发，获取当前选中行的索引

1.4.设置grid checkbox的点击事件(勾选与取消)
还没完成勾选的时候就执行click事件
function setClick(){//延时操作函数
/grid checkbox单机事件/
$(".k-checkbox").each(function () {
$(this).click(function () {
alert(“cc”)
});
});
}
//延时0.1秒执行函数setClick
window.setTimeout(setClick, 100);
区分什么时候为勾选什么时候为取消勾选

		demo

1.5.获取grid选中的行及数据
方法1：
var row = $("#Grid").data(“kendoGrid”).select(); //获取选中行对象
$.each(row,function(index,r){
var data = $("#Grid").data(“kendoGrid”).dataItem®;
console.log(data)
});
方法2：
var grid = $("#Grid").data(“kendoGrid”);
var data = grid.selectedDataItems();
grid双击获取该行数据
var querygrid= $("#Grid").data(“kendoGrid”);
querygrid.on(‘dblclick’, ‘.k-grid-content tr’, function () {
// 双击
var row = querygrid.data(“kendoGrid”).select();
var data = querygrid.data(“kendoGrid”).dataItem(row);
var d = data.id;//取数据 与前台的属性值对应
});

1.6.获取grid选中的行及数据(change事件）
change事件写在内部

Change事件写在外部

1.7.循环遍历grid所有行(获取数据)
遍历grid所有的行

获取数据

指定该行的列

1.8.获取grid指定列的全部数据
grid.dataSource.at(index);index从0开始
Grid.selectedDataItems();//获取所有勾选的grid数据

1.9.grid内容居中与刷新
标题居中
headerAttributes: {
“class”: “table-header-cell”,
style: “text-align: center”
},
内容居中
attributes: {style: “text-align:center”},
grid刷新：
$(’#grid’).data(“kendoGrid”).refresh();

1.10.grid toolbar的使用
代码：

效果图：

1.11.grid内部单独的checkbox
Cloumns配置列
{
field : “enabledFlag”,
title : ‘<@spring.message “默认勾选”/>’,
headerAttributes: {
“class”: “table-header-cell”,
style: “text-align: center”
},
attributes: {style: “text-align:center”},
width : 40
},
Transport读取数据源里面配置（Y表示选中，N表示未选中）

效果图

注：该checkbox与第一列的checkbox不一样，第一列的checkbox表示的是当前行的所有属性，而这个checkbox则是这一行数据对象中的一个属性，具有值得存在并不是表示选中该行。

1.12.grid链接
Cloumns配置列
{
title: ‘<@spring.message “详细信息”/>’,
width: 80,
template: function (rowdata) {
if (!!rowdata.id) {
return ‘<@spring.message “详细信息”/>’
}
return ‘’;
},
attributes: {style: “text-align:center”},
headerAttributes: { style: “text-align:center”}

},

效果图

1.13.grid按钮
Cloumns配置列
{
attributes: {style: “text-align:center”},
title : ‘<@spring.message “测试按钮”/>’,
headerAttributes: {style: “text-align:center”},
command : [
{
name:‘edit’,
template:" <@spring.message ‘TestButton’/>",
}
],
width : 80
},

效果图

1.14.grid操作
Cloumns配置列
{
title: “<@spring.message ‘hmdm.operation’/>”,
attributes: {style: “text-align:center”},
headerAttributes: {
“class”: “table-header-cell”,
style : “text-align: center”
},
attributes : {style: “text-align:center;padding:4px 3px 4px 3px”},
command: [
{
name: “edit”,
template: " <@spring.message ‘hap.edit’/>"
},
{
name: “destroy”,
template: "  <@spring.message ‘hmdm.delete’/>"
}
],
width: 100
}

效果图

点击编辑时触发的事件

保存时触发的事件

取消保存时触发的事件

注：这些事件均写在定义grid里面

1.15.grid列是否可编辑
设置指定列是否可编辑

要求:绑定grid组件时editable : true必须要有且为true，为false所有列都不可编辑

1.16.grid动态列
动态列：
1.封装要显示的grid列名

注：该示例代码为双层动态列即动态列里面又套了一层动态列
2.加载动态列

1.17.grid列editor
追加下拉框：

追加lov：

其它组件类似上面一样的方式可以追加到grid上

1.18.grid默认隐藏数据

1.19.grid操作传当前行数据

1.20.grid列必输和默认值

必输

该列有editor，需要在input框内添加required，该列无editor则不需要加required

默认值：

1.21.grid列类型设置
数字类型number
前台：

效果：

邮件类型email
前台：

效果：

日期类型date
前台：

效果：

2.kendoUI弹框与弹窗

2.1.友情提示弹框
效果图
.
代码实现
kendo.ui.showInfoDialog({
message: ‘没有选择任何属性!’
});
错误提示框
kendo.ui.showErrorDialog({
message: data.message
});

2.2.验证弹框
代码
kendo.ui.showConfirmDialog({
title: ‘提示’,
message: ‘确认删除么?’
}).done(function (e) {
// alert('你点击了 ’ + e.button)
if(e.button == “OK”){
alert(“OK”)
}else{
alert(“No”)
}
})

2.3.弹窗
基于本页面的弹框
效果图：

代码实现：

关闭弹框
window.parent.$("#dialog").data(“kendoWindow”).close();

弹窗(弹出新的页面)
window.parent.parent.openTab(“4071”, “新增申请单”, "${base.contextPath}/getMdViewAttrByMdCateId.html);
关闭弹窗
window.parent.parent.closeTab(“4071”);
图标引入

打开一个弹窗
方法1：
直接打开

方法2：
先注册window再打开

2.4.关闭弹窗
关闭弹窗触发的函数

新增申请单组织弹窗关闭方法
var overlay = window.parent.$(".k-overlay");overlay.css("display","none");window.parent.$("#selectOrgWin").parent().css(“display”, “none”);
每次打开同一个页面都会刷新页面内容不会重新打开相同页面
var iframe = window.parent.$(’#iframe_4005’);
iframe[0].src=iframe.attr(‘src’);

2.5.未完成任务（红色标记）
要实现以下：

实现代码

2.6.表单非空校验
Input框

根据id校验对应表单
var validator = $("#form").kendoValidator({
invalidMessageType : “tooltip”
}).data(“kendoValidator”);
提交前校验表单是否为空

效果

2.7.系统图标及相关组件
图标页面
http://localhost:8086/sys_icon.html

组件
http://localhost:8086/test.html

3.kendoUI组件默认值绑定

3.1.下拉框(DropDownList)
$("#id").data(“DropDownList”).text(indexVl);
$("#id").data(“DropDownList”).value(indexUnit);.

3.2.数字下拉框(NumberField)
$("#id").data(“NumberField”).text(indexVl);
$("#id").data(“NumberField”).value(indexUnit);.

3.3.文本输入框(TextField)
$("#id").val(indexVl);

3.4.日期输入框(DatePicker)
$(#id").data(“DatePicker”).text(indexVl);
$("#id").data(“DatePicker”).value(indexUnit);.

3.5.日期时间输入框(DateTimePicker)
$(#id").data(“DateTimePicker”).text(indexVl);
$("#id").data(“DateTimePicker”).value(indexUnit);.
具体使用

开始时间（要比结束时间小）

结束时间（要比开始时间晚）

3.6.多选框(CheckBox)
$("#id").attr(“checked”, “checked”);

3.7.Multiselect
var multiselect = $("#multiselect").data(“kendoMultiSelect”);
multiselect.value([“Item1”,“Item2”]);

4.ViewModel与模板

4.1.viewModel的使用
创建一个View-Model对象，View-Model对象根据你的Model数据产生(并绑定到指定容器)
var viewModel = kendo.observable({
     name: “John Doe”,
     displayGreeting: function() {
        var name = this.get(“name”);
        alert(“Hello, " + name + “!!!”);
     }
kendo.bind($(”#view"), viewModel);//把View和View-Model进行绑定
});
创建View，View就是一些html元素，用来绑定View-Model

          Display Greeting

4.2.data-bind使用
按钮：
aa

Input框(代码-效果图）

单个checkbox绑定

多个checkbox绑定

单选绑定(radio)

下拉框绑定

取viewModel里面的值

设置viewModel的值

4.3.kendoUI模板使用

调用模板 var contents = []; $.each(res.rows,function(i,r){ var a = kendo.template($('#cate').html()); contents.push(a(r)); }); $('#con').html(contents.join('')); 注：记得申明id为con的div容器

4.4.动态viewModel的使用
动态viewModel：
1.定义一个数组用于动态绑定值

2.input框绑定viewModel

5.传参

5.1.两个页面之间传参(链接方式)
传值页面：

接收页面：

5.2.页面向后台传参(链接方式)
传值页面：

后台接收：

5.3.后台向页面传参(ModelAndView方式)
后台

前台

5.4.kendoUI全局存储
全局存储其它页面也可以读取必要时要销毁：

5.5.ajax传单个变量
前台：

后台：

5.6.ajax传对象数组
前台：

后台：

注：传对象数组时要注意：前台封装对象的属性名称与后台dto对应的字段名一致，可以比dto的字段少但绝对不能多，否则报错。

5.7.ajax传js数组
前台

后台

5.8.url传值
前台

后台

5.9.前台链接传值到后台
前台

后台

5.10.Xml foreach使用
考虑到逗号

不考虑逗号

5.11.前台获取当前登录用户

		var user = '${Session.userId}';

6.事件绑定于动画

6.1.grid滚动事件绑定
$(".k-grid-content").scroll(function () {
instance.repaintEverything();
});

6.2.回到指定位置

6.3.js数组去重

6.4.tab标签页的使用

7.TreeView

7.1.treeView获取所有checkbox选中的值
Demo：

7.2.treeView修改text的值

注：0表示当前行的索引，表示第一行

7.3.treeView check事件

获取当前勾选的元素
var checkedMsg = masterViewRole.dataItem(e.node);
判断是否勾选(true表示勾选，false表示未选)
masterViewRole.dataItem(e.node).checked

7.4.treeView change事件
获取当前选中的元素

7.5.treeView 默认勾选
默认勾选：

8.对象

8.1.动态属性
将变量变为一个对象的属性：
var obj = {
attr: {
}
};
var egData = [‘oneAttr’, ‘twoAttr’, ‘threeAttr’];
for (var i = 0; i < egData.length; i++) {
obj.attr[egData[i]] = “123”
}

8.2.复制对象
将一个对象的属性复制到其它对象上：

9.其它

9.1.修改Lov样式

9.2.给Lov添加限制参数

9.3.Lov禁用与取消禁用
禁用
$("#dataTemplate").data(“kendoLov”).enable(false);
取消禁用
$("#dataTemplate").data(“kendoLov”).enable(true);

9.4.判断数据库中是否存在某张表

9.5.读取txt内容

byte[] content = file.getBytes();
BufferedReader br = null;
ByteArrayInputStream byteArray = new ByteArrayInputStream(content);
br = new BufferedReader(new InputStreamReader(byteArray));
String lineTxt = null;
while((lineTxt = br.readLine()) != null){
System.out.println(“111111”+lineTxt);
}

9.6.读取xml内容
Xml内容

后台读取

10.403拒绝访问与Excel批导

10.1.403拒绝访问
解决办法(url路径后面加安全验证)：
?${}_{c}srf.parameterName=${_csrf.token}

10.2.excel批量导入解析器

10.3.excel批量导出
需引入：

代码：
自定义导出excel

10.4.excel批量导入demo
demo:

框架自带导入方法（只对数据库单一表导入）

<@spring.message “excel.import”/>

上传excel、csv、txt、xml代码示例

11.后端总结

11.1.Dto字段添加模糊查询注解
@Condition(operator = ‘like’)

11.2.使用多语言
两张表分别以_tl和_b结尾

_b表(所有的字段信息)

_tl表（关联到_b表并设置要启用的多语言字段）

新建多语言_tl表

注：_tl表的id与_b表的id名要一样（关联两张表的）
Dto注解
Dto前面加注解@MultiLanguage

		多语言字段上加@MultiLanguageField

Xml：根据当前语言环境查询_tl表多语言字段值

注：不能获取_b表里面的name这样的话切换到英文环境也只能查询到中文信息，所以必须去多语言表_tl里面去查
Html设置多言语编辑字段

editor: function (container, options) {
$(’’)
.appendTo(container)
.kendoTLEdit({
idField: ‘id’,
field: ‘name’,
dto: “wht.demo.dto.Demo”,
model: options.model
});
}
注：idField为主键，field为多语言字段，dto为该多语言字段所在dto路径

11.3.自定义查询前台分页
在service接口的方法中传入四个参数，分别是以下

接口实现类

PageHelper.startPage(page,pageSize);//分页工具类
Controller

Mapper只要传入dto即可