easyui部分组件使用经验
easyui-switchbutton
需要实现在数据表格中有一列如下图，最开始参考官网，不完全可用，还得借助百度：
//其中onclick都是不可行的，是错误示例
{
title: '状态',field: 'ie',align: "center",width: 100,
formatter: function (value, row, index) {
if (value === 'Y') {
return "<form><input id='" + row.id + "' class='easyui-switchbutton switchBtn' data-options=\"onText:'启用',offText:'禁用' \" checked onclick=changeState1(" + JSON.stringify(row).replace(/"/g, '"') + ")></form>"
} else if (value === 'N') { return "<form><input id='" + row.id + "' class=\"easyui-switchbutton switchBtn\" data-options=\"onText:'启用',offText:'禁用', onclick: changeState1(" + JSON.stringify(row).replace(/"/g, '"') + ") \"></form>"
}
}
}, `
//简单的正确示例
return "<form><input id='" + row.id + "' class='easyui-switchbutton switchBtn'></form>"
//正确示范
onl oadSuccess: function (data) {
$('.editParam').linkbutton();
$(".switchBtn").switchbutton({
height: 18,
onText: "启用",
offText: "停用",
onChange: function (checked) {
//Y启用 true N禁用 false
var state = 'Y';
if (!checked) {
state = 'N';
}
var id = $(this).attr("id");
//错误示范
// $('#sw111').switchbutton({
// onChange: function(data){
// console.log("datasw111:" +JSON.stringify(data))
// }});
// $('.switchBtn').switchbutton({
// onChange: function(data){
// console.log("datasw:" +JSON.stringify(data))
// }
// })
1.class=‘easyui-switchbutton switchBtn’ 并且配合
(
"
.
s
w
i
t
c
h
B
t
n
"
)
.
s
w
i
t
c
h
b
u
t
t
o
n
(
）
才
能
显
示
成
功
2.
点
击
该
按
钮
调
用
启
用
禁
用
方
法
，
在
单
行
o
n
c
l
i
c
k
调
用
外
部
方
法
不
行
，
使
用
(".switchBtn").switchbutton(）才能显示成功 2.点击该按钮调用启用禁用方法，在单行onclick调用外部方法不行，使用
(".switchBtn").switchbutton(）才能显示成功2.点击该按钮调用启用禁用方法，在单行onclick调用外部方法不行，使用(’#sb’).switchbutton(‘disable’)方式调用onchange也都失败或无法实现想要的效果。只有在表格的onLoadSuccess 中$(".switchBtn").switchbutton({下添加onchange方法才能达到想要效果；
3.单行的id在方法中var id = $(this).attr(“id”);这种方式获取id；
easyui-tree
1显示树
<div class="easyui-panel" data-options="border:false,footer:'#ft'">
<form class="fast-form" id="adsrm">
<div class="easyui-tree" id="depree"></div>
</form>
</div>
<script type="text/javascript">
var id = "${id!}"
/**
* 初始化下拉框的相关参数
*/
$(function () {
$('#deptTree').tree({
url: ctx + '/a/getptTree?id=FP',
method: 'GET',
editable: false,
idField: 'id',
textField: 'name',
checkbox: true,
parentField: 'pid', // 扁平tree数据结构支持
lines: true
});
2回显树
/**
* 编辑回显树
*/
if (judgeNull(id)) {
//先将回显数据全部清除-
// var root = $("#deptTree").tree("getRoot");//获取根节点，如果回显列表为【】 root就一直是null,未测，不懂为啥
// $("#deptTree").tree("uncheck",root.target);
$('#deptTree').tree('loadData', []);
$.post("${request.conteath}/a/syer/dsList?userId=" + id, function (data) {
console.log("data666:" + JSON.stringify(data))
//回显
for (deptTreeId in data) {
console.log("deptTreeId:" + deptTreeId)
console.log("datalf:" + data[deptTreeId])
var node = $("#deptTree").tree("find", data[deptTreeId]);// 后面这个参数就是树的id 不懂可查看easyui官网
$("#deptTree").tree("check", node.target);//就是要用target，改成id就不会勾选，不懂为啥，参考官网
}
}, 'json');
}
3保存树
seDatarsion: function (id) {
$.modalDialog({
title: '设置',
href: ctx + "/i/userRole/edDaPms?id=" + id,
width: 400,
height: 600,
onOpen: function () {
$.modalDialog.openner_datagrid = useTblSector;//因为添加成功之后，需要刷新这个Grid，所以先预定义好
},
buttons: [{
text: "保存",
iconCls: "fa fa-save",
handler: function () {
// var chooseDept = $('#deptTree').tree('getChecked');//用这个只获取勾选的树id
var chooseDept = $('#deptTree').tree('getChecked', ['checked', 'indeterminate']);//用这个会获取勾选的树id及每一层父树id
var dataPmsIds = [];
if (!chooseDept || chooseDept.length === 0) {
dataPmsIds = [""];//清空
} else {
for (nid in chooseDept) {
dataPmsIds.push(chooseDept[nid].id);
// $("#deptTree").tree("check",data[deptTreeId]);//这个不行 无意义
}
}
var param = {
userd: id,
datss: dataPmsIds
};
$.post(ctx + '/a/sUer/saetams', param, function (res) {
if (0 === res.code) {
$.messager.show({
title: '提示',
msg: res.msg
});
$.modalDialog.handler.dialog('close');
} else {
$.messager.alert("错误", data.msg, "error");
}
}, 'json');
// $.ajax({//不行的代码，报未收到集合参数
// type: "post",
// dataType: "json",
// contentType: "application/json",
// url: ctx + "/a/sysUr/savtaPs",
// data: JSON.stringify(param),
// beforeSend: function () {
// // 加载遮罩层
// $.messager.progress({
// text: '保存中...'
// });
// },
// success: function (data) {
// if (data.code === 0) {
// userTableSelector.datagrid('reload');
// $.messager.alert("提示", data.msg, "info");
// } else {
// $.messager.alert("错误", data.msg, "error");
// }
// //关闭遮罩层
// $.messager.progress('close');
// }
// });
}
},
easyui-datagrid
1实现复选框多选，单元格单选。
是否跨页 可参考easyui官网
var isCheckFlag = true;
//以下 3个 onClickCell onSelect onUnSelect实现复选框多选，单元格单选
onClickCell: function (rowIndex, field, value) {
isCheckFlag = false;
},
onSelect: function (rowIndex, rowData) {
if (!isCheckFlag) {
$(this).datagrid('unselectAll');//存在多页，只保证当前页有一条被选，其他页也存在一条可被选，就跨页单元格不单选了
$(this).datagrid('clearSelections');//所有页中只存在一个单元格被选
isCheckFlag = true;
$(this).datagrid('selectRow', rowIndex);
}
userRoleTableSelector.datagrid('clearChecked');
userRole.showUserRole(rowIndex, rowData);
},
onUnSelect: function (rowIndex, rowData) {
if (!isCheckFlag) {
$(this).datagrid('unselectAll');
isCheckFlag = true;
$(this).datagrid('unselectRow', rowIndex);
}
},
2勾选后，删除参数格式提交给后端
var chooseUserNum = usTableSeor.datagrid("getChecked");
if (!chooseUserNum || chooUserNum.length === 0) {
$.messager.alert("提示", "请勾至少一个用户！", "info");
return false;
}
$.messager.confirm("系统信息", "确定要中得用户吗？", function (r) {
if (r) {
var delUsers = [];
for (var i = 0; i < chooseUserNum.length; i++) {
delUsers.push(chooseUserNum[i]);
}
var params = {
delUsers: delUsers
};
$.ajax({
type: "post",//不可少，前4个不用变
dataType: "json",//不可少，前4个不用变
contentType: "application/json",//不可少，前4个不用变
url: ctx + "/a/delUser",//不可少，前4个不用变
// data: JSON.stringify(params),//错误示例
// data: delUsers,//错误示例
data: JSON.stringify(delUsers),//唯一正确示例
// 以下没试过行不行哦$.post(ctx + '/a/deUser', delUsers, function (data) {
// if (data.code === 0) {
// userRTleSetor.datagrid('reload');
// $.messager.show({
// title: '提示',
// msg: data.msg
// });
// } else {
// $.messager.alert("错误", data.msg, "error");
// }
// //关闭遮罩层
// $.messager.progress('close');
// }, 'json');
其他
1easyui回显方式有好几种 前后端那样///显示树形也有 2种方式 前后端
2同个用户 同个数据库 不同数据库用户登录 是不一样的表哎 神奇/子查询，，，连表查询easy显示分组
3查询参数使用表和不适用表2种子查询 和联表查询
4几种循环方式–前后端 //左连接 ==where + 左表数据 右表为空 的数据连表 和子查询 在于 主表不一样‘ 子查询只能查询出一对一的数据 否则会报错