dojo

来源:互联网 发布:乐山电视台网络直播 编辑:程序博客网 时间:2024/04/28 00:13

<%@ 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="#" onclick="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
   }
   ]
}