<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>'
<link rel="stylesheet" href="<s:url value='/scripts/dojo1.5/dijit/themes/nihilo/nihilo.css' encode='false' includeParams='none' />" />
<link rel="stylesheet" href="<s:url value='/scripts/dojo1.5/dijit/themes/nihilo/tmpdir.css' encode='false' includeParams='none' />" />
<script type="text/javascript" src="<s:url value='/scripts/dojo1.5/dojo/dojo.js' encode='false' includeParams='none' />"
djConfig="parseOnLoad:true, isDebug:true">
</script>
<script type="text/javascript">
/*注册custom的路径*/
dojo.registerModulePath("custom", "<s:url value='/scripts/dojo1.5/custom' encode='false' includeParams='none' />");
//引入依赖(类似java的 import)
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("custom.CheckBoxTree");
//一个dojo的store对象,它保存着dojo widget的数据
//dojo widget状态 的更变,可以及时反应到 store中的数据
var permStore;
/*
*json格式的权限树的数据, 它将 被 放到 store对象中,用于初始化权限树 .
*我们也可以改用ajax一种方式初始化 store对象.
*permStore = new dojo.data.ItemFileWriteStore(
* {url: yoururl}
*);
*/
var pdata=<s:property value='%{permTreeJSonData}' />;
function makePermTree( domLocation ) {
permStore = new dojo.data.ItemFileWriteStore(
{data: pdata}
);
var model = new custom.CheckBoxStoreModel( {
store: permStore,
query: {level: '1'},
rootId: 'root',
rootLabel: '权限管理',
checkboxAll: true,
checkboxRoot: false,
checkboxState: true,
checkboxStrict: true
});
//创建权限树
var tree = new custom.CheckBoxTree( {
model: model,
id: "PermTree",
branchIcons: true,
nodeIcons: true});
tree.placeAt( domLocation );
dojo.connect( tree,"onNodeChecked", function(storeItem, nodeWidget){
}
);
}
function submitChk() {
var inputRoleId = dojo.byId("inputRoleId");
var roleIdValue = inputRoleId.value;
var selectedIds = []; //存放打钩的权限项ID
permStore.fetch({
query : {name : "*"},
onItem : function(item, request) {
var selId = permStore.getValue(item, "id");
var checked = permStore.getValue(item, "checkbox");
if(checked) {
//把打钩的权限项ID放到数组
selectedIds.push(selId);
}
}
});
var postUrl = "/bp/bp/Perm_save";
var xhrArgs = {
url: postUrl,
content: {roleId:roleIdValue, selectedPermIds: selectedIds},
//提交 选中的权限的 ID
//如selectedPermIds=1&selectedPermIds=2&selectedPermIds=3&selectedPermIds=6
handleAs: 'json',
// timeout: 10000
load: afterPost, // 成功时的回调函数
error: handleError // 失败时的回调函数
};
//用ajax方式 提交
dojo.byId("response").innerHTML="saving ...";
dojo.xhrPost(xhrArgs);
}
function handleError() {
dojo.byId("response").innerHTML="failed to save the changes";;
}
function afterPost(result) {
dojo.byId("response").innerHTML="saved successfully";
}
</script>
<body>
<div class="nihilo">
<div id="response" ></div>
<div id="CheckboxTree">
<script type="text/javascript">
makePermTree("CheckboxTree");
</script>
</div>
<s:hidden id="inputRoleId" name="roleId" value="%{roleId}"></s:hidden>
<a href="#" οnclick="submitChk();" >save</a>
</div>
</body>
{
identifier:'id',
label:'name',
items:[
{
id:"1",
level:1,
name:"Project ",
checkbox:true,
children:[
{_reference:"2"},
{_reference:"3"}
]
},
{
id:"2",
level:2,
name:"Project View",
checkbox:true,
children:
[
{_reference:"5"}
]
},
{
id:"5",
level:3,
name:"Project view2",
checkbox:true
},
{
id:"3",
level:2,
name:"Print Project",
checkbox:true
},
{
id:"4",
level:1,
name:"User Managemenent",
checkbox:true
}
]
}