EasyUI的使用

工具栏,放入授权管理的数据网格,由easyui-combobox,easyui-linkbutton,easyui-searchbox组成

工具栏的html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="toolbar" class="toolbarspace">
平台类型:
<select id="shouquanguanli_pingtaitype_select" class="easyui-combobox" name="state" style="width:80px;" data-options="textField:'text',panelHeight:'auto'">
<option value="10">全部</option>
<option value="0">水表</option>
<option value="1">热表</option>
<option value="2">其他</option>
</select>
权限:
<select class="easyui-combobox" id="shouquanguanli_shouquanstatus_select" name="state" style="width:80px;" data-options="textField:'text',panelHeight:'auto'">
<option value="10">全部</option>
<option value="1">已授权</option>
<option value="0">未授权</option>
</select>
<a href="javascript:0" class="easyui-linkbutton c5" onclick="selectUserData()">查询</a>
<input id="shouquanguanli_sear_name" class="easyui-searchbox" data-options="searcher:selectUserByNameOrPhoneOrPlatOrPlatName,prompt:'输入姓名/手机号/平台编号/平台名称'">
<div id="shouquan_div" style="display: inline;">
<a id="btn_setEmpower" href="javascript:0" class="easyui-linkbutton c6">授权</a>
<a id="btn_editEmpower" href="javascript:0" class="easyui-linkbutton c6">修改授权</a>
<a id="btn_zhuxiao" href="javascript:0" class="easyui-linkbutton c6">注销</a>
</div>
</div>

工具栏的搜索和查询js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function selectUserData(){		
var type=$("#shouquanguanli_pingtaitype_select").combobox("getValue");
var status=$("#shouquanguanli_shouquanstatus_select").combobox("getValue");

$("#logupMsg").datagrid("loading");
$.post(BASE_PATH +"/userPlat/selectUserData", {
type:type,
status:status,
userId:loginUser.userId,
userRole:loginUser.userRole,
userCompany:loginUser.userCompany
},function(res){
//debugger;
var total=res.length;
selected = false;
$("#logupMsg").datagrid("loaded");
$('#logupMsg').datagrid('loadData', res);
},'json');
}

function selectUserByNameOrPhoneOrPlatOrPlatName(){
debugger;
var val= $("#shouquanguanli_sear_name").textbox("getValue");
$("#logupMsg").datagrid("loading");
$.post(BASE_PATH +"/userPlat/selectUserByNameOrPhoneOrPlatOrPlatName", {
userRole:loginUser.userRole,
userCompany:loginUser.userCompany,
val:val
},function(res){
//debugger;
var total=res.length;
selected = false;
$("#logupMsg").datagrid("loaded");
$('#logupMsg').datagrid('loadData', res);
},'json');
}

工具栏的搜索和查询java代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 	@RequestMapping("/selectUserData")
@ResponseBody
public String selectUserDataByUserId(int type,int status,int userId,int userRole,String userCompany)
throws Exception {
String res = userPlatService.selectUserData(type,status,userId,userRole,userCompany);
return res;
}

@Override
public String selectUserData(int type,int status,int userId,int userRole,String userCompany) {
List<UserPlatformModel> loginList = new ArrayList<UserPlatformModel>();
if(userRole == 0) {
loginList = userPlatMapper.selectUserData(type,status);
}else {
loginList = userPlatMapper.selectUserDataByUserCompany(type,status,userCompany);
}
if(userId != 1) {
for(UserPlatformModel plat:loginList) {
plat.setPlatformRemark("");
}
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("total", loginList.size());
jsonObject.put("rows", JSONArray.fromObject(loginList).toString());
return jsonObject.toString();
}

<select id="selectUserData" resultType="UserPlatformModel">
SELECT
*
FROM
t_login_user
LEFT JOIN t_user_platform ON t_login_user.userid = t_user_platform.userid
LEFT JOIN t_platform ON t_platform.PlatformId = t_user_platform.PlatformId
where 1=1
<if test="type != 10">
and t_platform.PlatformType = #{type}
</if>
<if test="status != 10">
and t_login_user.UserStatus = #{status}
</if>
GROUP BY t_login_user.UserId
ORDER BY UserCreateTime DESC
</select>

<select id="selectUserDataByUserCompany" resultType="UserPlatformModel">
SELECT
*
FROM
t_login_user
LEFT JOIN t_user_platform ON t_login_user.userid = t_user_platform.userid
LEFT JOIN t_platform ON t_platform.PlatformId = t_user_platform.PlatformId
where 1=1
and t_login_user.UserCompany = #{userCompany}
<if test="type != 10">
and t_platform.PlatformType = #{type}
</if>
<if test="status != 10">
and t_login_user.UserStatus = #{status}
</if>
GROUP BY t_login_user.UserId
ORDER BY UserCreateTime DESC
</select>

@RequestMapping("/selectUserByNameOrPhoneOrPlatOrPlatName")
@ResponseBody
public String selectUserByNameOrPhoneOrPlatOrPlatName(int userRole,String userCompany,String val)
throws Exception {
String res = userPlatService.selectUserByNameOrPhoneOrPlatOrPlatName(userRole,userCompany,val);
return res;
}

@Override
public String selectUserByNameOrPhoneOrPlatOrPlatName(int userRole,String userCompany,String val) {
List<UserPlatformModel> loginList = null;
if(userRole == 0) {
loginList = userPlatMapper.selectUserByNameOrPhoneOrPlatOrPlatName(val);
}else {
try {

loginList = userPlatMapper.selectUserByNameOrPhoneOrPlatOrPlatNameAndCompany(userCompany,val);
} catch (Exception e) {
String a="";
}
}
if(userRole != 0) {
for(UserPlatformModel plat:loginList) {
plat.setPlatformRemark("");
}
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("total", loginList.size());
jsonObject.put("rows", JSONArray.fromObject(loginList).toString());
return jsonObject.toString();
}

select id="selectUserByNameOrPhoneOrPlatOrPlatName" resultType="UserPlatformModel">
SELECT
*
FROM
t_login_user
LEFT JOIN t_user_platform ON t_login_user.userid = t_user_platform.userid
LEFT JOIN t_platform ON t_platform.PlatformId = t_user_platform.PlatformId
WHERE
userPhone = #{val} or userName =#{val} or
t_platform.PlatformCode =#{val} or t_platform.PlatformName = #{val}
GROUP BY t_login_user.UserId
ORDER BY UserCreateTime DESC
</select>

<select id="selectUserByNameOrPhoneOrPlatOrPlatNameAndCompany" resultType="UserPlatformModel">
SELECT
t_login_user.userId,
t_login_user.userPhone,
t_login_user.userPassword,
t_login_user.userName,
t_login_user.userCompany,
t_login_user.userRole,
t_login_user.userStatus,
t_login_user.userOpenId,
t_login_user.userCreateTime,
t_login_user.userBluetooth,
t_login_user.userBluetoothTime,
t_login_user.userCheck,
t_login_user.userCheckTime,
t_login_user.userRemark,
t_user_platform.loginName,
t_user_platform.loginPassword
FROM
t_login_user
LEFT JOIN t_user_platform ON t_login_user.userid = t_user_platform.userid
LEFT JOIN t_platform ON t_platform.PlatformId = t_user_platform.PlatformId
WHERE
userCompany like '%${userCompany}%' and (
userPhone = #{val} or userName =#{val} or t_platform.PlatformCode =#{val} or t_platform.PlatformName = #{val}
)
GROUP BY t_login_user.UserId
ORDER BY UserCreateTime DESC
</select>
方法名称 参数 描述
setValues values 设置组件值的数组。代码实例:$(‘#cc’).combobox(‘setValues’, [‘001’,‘002’]);
getValue value 获取组件的值。

|事件名称|参数|描述|
|onSelect|record|当用户选择一个列表项时触发。|

工具栏的按钮js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
   //选中行的数据,数据行是否被选中
var ROWDATA = null,selected = false;
//数据网格单选的事件
$('#logupMsg').datagrid({
onSelect: function(rowindex, rowdata) {
ROWDATA = rowdata;
selected = true;
return ROWDATA;
}
});
// 授权面板打开时获得选中行的信息
$('#btn_setEmpower').click(function() {
if (selected) {
$('.easyui-dialog').dialog('close');
$('#dialog-Setting').dialog({ title: '账号授权-' + ROWDATA['userName'] });
$('#dialog-Setting').dialog('open');
$('#loginNum').textbox('setText', ROWDATA['userPhone']);
$('#loginPw').textbox('setText', ROWDATA['userPassword']);
$('#pfNum').textbox('setText', ROWDATA['uloginName']);
$('#pfPw').textbox('setText', ROWDATA['uloginPassword']);
} else {
alert('请选择一个用户!')
}
});
// 修改授权面板打开时获得选中行的信息
$('#btn_editEmpower').on('click', function() {
if (selected) {
$('.easyui-dialog').dialog('close');
$('#dialog_edit').dialog({ title: '修改授权-' + ROWDATA['userName'] });
$('#dialog_edit').dialog('open')
} else {
alert('请选择一个用户!')
}
})
// 注销用户面板打开并设置标题
$('#btn_zhuxiao').on('click', function() {
if (selected) {
$('.easyui-dialog').dialog('close');
$('#dialog_zhuxiao').dialog({ title: '注销用户-' + ROWDATA['userName'] });
$('#dialog_zhuxiao').dialog('open');
} else {
alert('请选择一个用户!');
}
})