从数据库查询到的结果展示在页面上、zTree模板模板参考

查询结果展示在页面上

 $(function(){
      $("#pageId").load("doPageUI.do",function(){
          doGetObjects();
      });
      $(".input-group-btn")
      .on("click",".btn-search",doQueryObjects)
      .on("click",".btn-add",doLoadEditUI)

      $("#tbodyId")
      .on("click",".btn-delete",doDeleteObject)
      .on("click",".btn-update",doLoadEditUI)
   });
   function doGetObjects(){
       //1.params
       //获取在Page.html中绑定的当前页码值
       var pageCurrent=$("#pageId").data("pageCurrent");
       //假如没有值,设置初始值为1
       if(!pageCurrent)pageCurrent=1;
       //var params="pageCurrrent="+pageCurrent;
       var params={"pageCurrent":pageCurrent};
       //获取查询时用户输入的名字
       var name=$("#searchNameId").val();
       if(name)params.name=name;
       //2.url
       var url="role/doFindPageObjects.do";
       //3.ajax request
       console.log(params);
       $.getJSON(url,params,function(result){
           doHandleResponseResult(result);
       });
   }

 function doHandleResponseResult(result){

       if(result.state==1){
          doSetTableBodyRows(result.data.records);
          doSetPagination(result.data);
       }else{
          doSetTableBodyErrors(result.message);
       }
   }
 function doSetTableBodyRows(records){

      //获取tbody对象,并清空
       var tBody=$("#tbodyId");
       tBody.empty();
       //2.迭代数据,并追加到tBody
       for(var i in records){
          //2.1构建tr对象
          var tr=$("<tr></tr>");
          tr.data("id",records[i].id);
          //2.2构建tds对象
          var tds=doCreateTds(records[i]);
          //2.3将tds对象追加到tr中
          tr.append(tds);
          //2.4将tr追加到tbody中
          tBody.append(tr);
       }
  }

 function doCreateTds(row){
       var tds="<td>"+row.name+"</td>"+
     "<td>"+row.note+"</td>"+
     "<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
     "<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
     "<td>"+row.createdUser+"</td>"+
     "<td>"+row.modifiedUser+"</td>"+
     "<td><a class='btn-delete'>delete</a>"+
     "&nbsp;<a class='btn-update'>update</a></td>";
     return tds;
 }
 function doSetTableBodyErrors(message){
       //获取body对象并清空
       var tBody=$("#tbodyId");
       tBody.empty();
       //创建tr对象
       var tr=$("<tr></tr>");
       //创建td对象
       //var len=$("table thead").find("tr").find("th").length;
       var len=$("table th").length;
       var td=$("<td></td>");

       //prop函数的用法 直接给colspan赋值为len
       td.prop("colspan",len);
       td.append(message);
       tr.append(td);
       //将tr追加到tbody
       tBody.append(tr);
 }

zTree模板

var zTree; 
    var setting = {
    data : {
        simpleData : {
            enable : true,
            idKey : "id",  //节点数据中保存唯一标识的属性名称
            pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
            rootPId : null  //根节点id
        }
    },
    check:{
        enable:true,//允许多选
        nocheckInherit:true
    }//此配置提供复选框操作(可查官方zTree)
    }


    $(function(){
        //异步加载菜单信息,初始化页面菜单
        doLoadSysMenus();
        $(".box-footer")
        .on("click",".btn-save",doSaveOrUpdate)
        .on("click",".btn-cancel",doCancel);

    });

    //页面加载完成时初始化zTree
    function doLoadSysMenus(){
        var url="menu/doFindZtreeMenuNodes.do"
        $.getJSON(url,function(result){
         if(result.state==1){
            zTree=$.fn.zTree.init($("#menuTree"),setting,result.data);
            //修改时添加如下代码(注意先后顺序)
            var rowData=$("#mainContentId").data("data");
            if(rowData)doInitEditFormData(rowData);
         }else{
            alert(result.message);
         }
      });
    }