中文帮助文档和扩展实例,修复了上面的小bug

据书上说剧中人物的权能管理一般有5张表构成,如下图,这里大家要兑现对剧中人物role实行授权操作,轻便的话就是要对rolemenu进行增添操作,这里前端首要用easyui-combobox来落到实处权力多选。图片 1

下载地址:jQuery EasyUI API
华语援助文书档案

修复bug后的代码:jquery.combobox.js
上边是参数表明:
* comboboxContainerClass
o 设置任何控件的体制名(包在最外边)
* comboboxValueContainerClass
o 设置突显选粤语本和drop-down的体制名
* comboboxValueContentClass
o 设置选普通话本的显示样式
* comboboxDropDownClass
o 设置下拉选取的样式
* comboboxDropDownButtonClass
o 设置下拉按键的体裁
* comboboxDropDownItemClass
o 设置下拉精选的体制
* comboboxDropDownItemHoverClass
o 鼠标移到选项上时的样式
* comboboxDropDownGroupItemHeaderClass
o 设置optgroup ItemHeader的样式
* comboboxDropDownGroupItemContainerClass
o 设置optgroup 成分的体裁
* animationType
o 设置动画效果的体制,如slide,hide(100),暗中认可slide
* width
o 控件宽度
* height
o 控件中度

完整思路是先初阶化combobox,绑定全部的权柄;然后依据当下的角色获取该脚色早就有所的权位,设置combobox选中那个权限;最终修改好权力了,获取combobox的选中值发送到后端进行封存。

1.validatebox验证和提示框扩大:

  * onChange

1、控件开头化
先是前端html,设置combobox的value是角色id,text是角色name,代码如下:

//弹框
$.extend({
show_alert: function (strTitle, strMsg) {
$.messager.alert(strTitle, strMsg);
}
});
//扩展validatebox,添加验证
$.extend($.fn.validatebox.defaults.rules, {
eqPwd: {
validator: function (value, param) {
return value == $(param[0]).val();
},
message: '密码不一致!'
},
idcard: {// 验证身份证
validator: function (value) {
return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
},
message: '身份证号码格式不正确'
},
minLength: {
validator: function (value, param) {
return value.length >= param[0];
},
message: '请输入至少(2)个字符.'
},
length: {
validator: function (value, param) {
var len = $.trim(value).length;
return len >= param[0] && len <= param[1];
},
message: "必须介于{0}和{1}之间."
},
phone: {// 验证电话号码
validator: function (value) {
return /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
},
message: '格式不正确,请使用下面格式:020-88888888'
},
mobile: {// 验证手机号码
validator: function (value) {
return /^(13|15|18)\d{9}$/i.test(value);
},
message: '手机号码格式不正确'
},
intOrFloat: {// 验证整数或小数
validator: function (value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message: '请输入数字,并确保格式正确'
},
currency: {// 验证货币
validator: function (value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message: '货币格式不正确'
},
qq: {// 验证QQ,从10000开始
validator: function (value) {
return /^[1-9]\d{4,9}$/i.test(value);
},
message: 'QQ号码格式不正确'
},
integer: {// 验证整数 可正负数
validator: function (value) {
//return /^[+]?[1-9]+\d*$/i.test(value);
return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);
},
message: '请输入整数'
},
age: {// 验证年龄
validator: function (value) {
return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
},
message: '年龄必须是0到120之间的整数'
},
chinese: {// 验证中文
validator: function (value) {
return /^[\Α-\¥]+$/i.test(value);
},
message: '请输入中文'
},
english: {// 验证英语
validator: function (value) {
return /^[A-Za-z]+$/i.test(value);
},
message: '请输入英文'
},
unnormal: {// 验证是否包含空格和非法字符
validator: function (value) {
return /.+/i.test(value);
},
message: '输入值不能为空和包含其他非法字符'
},
username: {// 验证用户名
validator: function (value) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
},
message: '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)'
},
dbname: {// 验证字段表名
validator: function (value) {
return /^[a-zA-Z][a-zA-Z0-9]{3,19}$/i.test(value);
},
message: '输入不合法(字母开头,允许4-20字节,允许字母数字)'
},
faxno: {// 验证传真
validator: function (value) {
return /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
},
message: '传真号码不正确'
},
zip: {// 验证邮政编码
validator: function (value) {
return /^[1-9]\d{5}$/i.test(value);
},
message: '邮政编码格式不正确'
},
ip: {// 验证IP地址
validator: function (value) {
return /d+.d+.d+.d+/i.test(value);
},
message: 'IP地址格式不正确'
},
name: {// 验证姓名,可以是中文或英文
validator: function (value) {
return /^[\Α-\¥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
},
message: '请输入姓名'
},
date: {// 验证姓名,可以是中文或英文
validator: function (value) {
//格式yyyy-MM-dd或yyyy-M-d
return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
},
message: '清输入合适的日期格式'
},
msn: {
validator: function (value) {
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
},
message: '请输入有效的msn账号(例:abc@hotnail(msn/live).com)'
},
same: {
validator: function (value, param) {
if ($("#" + param[0]).val() != "" && value != "") {
return $("#" + param[0]).val() == value;
} else {
return true;
}
},
message: '两次输入的密码不一致!'
}
});

    o
当选项变化时触发该事件,接收多个参数,第二个是selecedIndex,首个是selectedValue

<table class="grid"> 
<tr> 
<td colspan="2"><input id="id" name="id" type="hidden" /> 
</td> 
</tr> 
<tr> 
<td>角色名称:</td> 
<td><input name="roleName" class="easyui-validatebox" 
readonly></input></td> 
</tr> 
<tr> 
<td>角色权限:</td> 
<td><select id="roleRight" class="easyui-combobox" 
name="roleRight" 
data-options=" 
url:'/ciccpsMember/menu/getAllMenus', 
editable:false,required:true, 
valueField:'menuid', 
textField:'menuname', 
multiple:true, 
panelHeight:'100'"> 
</select></td> 
</tr> 
</table> 

选取办法:(黑灰标志)

上边是个简易示例:

后端获取系统全体的权力,也正是menu表的笔录,代码如下:

<input type="text" name="txtUserNameEdit" id="txtUserNameEdit" class="easyui-validatebox textbox" data-options="required:true,validType:'length[2,20]'" style="width:170px;height:22px;" />
<input type="text" name="txtMobilePhone" id="txtMobilePhone" class="easyui-validatebox textbox" data-options="required:false,validType:'mobile'" style="width:170px;height:22px;" />

复制代码 代码如下:

public JsonView getAllMenus() throws Exception{ 
 List<Menu> menus = Menu.findAll(Menu.class); 

 return new JsonView(menus); 
} 

2.datagrid动态输出列:

<script type=”text/javascript” language=”javascript”>
$(function () {
var settings = {
‘width’:200,
‘onChange’: function (selectedIndex,selectedVale) {
alert(‘value: ‘ + selectedVale);
}
};
var combobox = $(“#combobox-tmpl-test”).combobox(settings);
});
</script>
<select id=”combobox-tmpl-test” name=”testname” tabindex=”3″>
<option value=”1″>Kirill</option>
<option value=”2″>Yura</option>
<option value=”3″>Jhon Smith</option>
<option value=”4″>Mila</option>
</select>

2、获取剧中人物当前抱有的权柄

前端JS输出:

您或许感兴趣的篇章:

  • jQuery EasyUI API
    汉语补助文书档案和庞大实例
  • Jquery api 速查表分享
  • 不等的jQuery
    API来拍卖分化的浏览器事件
  • jQuery EasyUI API 普通话文书档案 – TreeGrid
    树表格使用介绍
  • jQuery EasyUI API 中文文书档案 –
    Tree树使用介绍
  • jQuery EasyUI API 粤语文档 –
    PropertyGrid属性表格
  • jQuery EasyUI API 中文文书档案 –
    DataGrid数据表格
  • jQuery EasyUI API 汉语文书档案 –
    Dialog对话框
  • jQuery EasyUI API 汉语文书档案 –
    TimeSpinner时间微调器
  • Dreamweaver
    jQuery智能提醒插件,补助版本提示,扶助1.6api
  • 如jQuery般易用的api风格代码分享
  • jQuery validate 中文API
    附validate.js中文api手册
  • jQuery EasyUI 中文API
    Layout(Tabs)
  • jQuery EasyUI 中文API
    Button使用实例
  • jquery
    1.4.2颁发!首如果性质与API
  • jquery中有何样api
    jQuery主要API

前端JS脚本获取当前剧中人物role的id发送到后端获取该角色有所的权能的id数组,如下:

//动态构造列表
var option = {};
$.ajax({
url: "/Table/GetTabColsJsonStr",
type: "post",
data: {},
dataType: "json",
success: function (data) {
option.columns = data.columns;
$("#ui_TabData_dg").datagrid({
url: "/Table/GetTabDataInfoByTabId",
striped: true, rownumbers: true, pagination: true, pageSize: 20, singleSelect: true, multiSort: true,
idField: 'Id',
sortName: 'UpdateTime',
sortOrder: 'desc',
pageList: [20, 40, 60, 80, 100]
});
$('#ui_TabData_dg').datagrid(option);
}
})
function newAuthorize(){ 
 var row = grid.datagrid('getSelected'); 
 if (row){ 
 win1.window('open'); 
 form1.form('load',row); 
 $.post('/ciccpsMember/role/getMenusByRid', { id:row.id}, 
  function(result) { 
   if (result) { 
    //获取权限menu的id 
    var t=[]; 
    jsonList=result.rows; 
    for(var i=0;i<jsonList.length;i++){ 
    t[i]=jsonList[i].muid; 
    } 
    $('#roleRight').combobox('setValues',t);//设置combobox的选中值 
   } else { 
   $.messager.alert('错误','出错了','error'); 
   } 
  },'json'); 
 //form.form('load', '/ciccpsMember/admin/getAdminById/'+row.id); 
 //form1.url = '/ciccpsMember/role/authorize/?id='+row.id; 
 } else { 
 $.messager.show({ 
  title:'警告', 
  msg:'请先选择信息记录。' 
 }); 
 } 
} 

后端:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图