検索
ホームページウェブフロントエンドjsチュートリアルEasyUI は人事ツリーのサンプル コードを作成します

この記事では、主に人事ツリーを作成するための EasyUI のサンプル コードを共有します。これは、最近のプロジェクトで作成したツリー状のドロップダウン リストです。以下に、エディターが人事ツリーを作成するための easyUI の実装コードを共有します。必要な友人はそれを参照してください。皆さんのお役に立てば幸いです

プロジェクトのツリー ドロップダウン リストは、担当者を選択するために使用されます:

話しましょう。まずは機能について。右側のユーザーの名前をダブルクリックし、「OK」をクリックすると、集合的なビジネス ロジック操作が実行され、通常はユーザーが特定のテーブルに追加されます。

この p の具体的なコードを見てみましょう。このスタッフ ツリーはプロジェクト内の多くの場所で使用されるため、この p を抽象化し、公開 JSP ページとして使用します。これを呼び出す必要がある場合は、この jsp

userTree.jsp:


<%@ page contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sino" tagdir="/WEB-INF/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!--弹出窗口,人员树必要-->
<link href="${ctx}/static/lib/jquery-easyui/themes/default/easyui.css" rel="external nofollow" rel="external nofollow" 
 type="text/css" rel="stylesheet" />
<script src="${ctx}/static/lib/jquery-easyui/jquery.easyui.min.js"
 type="text/javascript"></script>
<style type="text/css">
 li:hover {
 cursor: pointer;
 }
</style>
<!-- 模态框弹出设置评估人 -->
 <p id="groupuser" class="modal fade" aria-hidden="true"
  data-backdrop="static">
  <p class="modal-dialog">
   <p class="modal-content">
    <input type="hidden" id="ModaltaskLineId" />
    <p class="modal-header">
     <h4 id="请选择评估人">请选择评估人</h4>
    </p>
    <p class="modal-body">
     <p >
      <p style=" float: left; width: 300px;font-size:15px; ">
      待选择人
      </p>
      <p style="float: left; font-size:15px; width: 100px; ">
      已选择人
      </p>
     </p>
     <p>
      <p id="tt"
       style="border:1px solid #e4eaf8; float: left; width: 250px; height: 300px; overflow-x: scroll;">
      </p>
      <p align="center" style="float: left; margin-left: 10px; margin-right:10px; height: 150px;margin-top: 150px;">
       <button type="button" class="btn-xs btn-primary" onclick="$add()">>></button>
      </p>
      <p
       style="border:1px solid #e4eaf8;width:250px; height: 300px;overflow-x: scroll;">
       <ul id="names" style="list-style: none;padding-left:5px;">
       </ul>
      </p>
      <p></p>
     </p>
     <p align="center">
        <input class="btn btn-cmcc mr15 " type="button" value="确定" onclick="modelCheckAssessors()">
        <input class="btn btn-cmcc mr15" type="button" value="取消" onclick="modalHide()">
      </p>
     <p/>
    </p>
   </p>
  </p>
 </p>
<script type="text/javascript">
 //人员数组(longinName) 本项目是已登录名为主键存入,也可存入userID
 var arr = [];
 //点击确定的处理逻辑方法名称,调用方法的时候需要设置
 var fn = "";
 //展示人员树,右边没有默认值
 function showTree(groupId) {          //查询范围是在groupId这个部门以下的节点部门和人员
  //console.log(groupId);
  $(&#39;#tt&#39;).tree({
   //一般情况下,除了url外,其他参数非必选
   //url: contextPath + requestURL,//请求的后台路径              //这里需要注意的是后台url不要指定请求方式为GET方式,否则会报错。
   url : CONTEXT_PATH + "/sysmgr/user/chooseAssessorTree?groupId="+groupId,
   animate : true, //是否需要动画效果
   checkbox : &#39;true&#39;, //是否需要checkbox 支持复选
   cascadeCheck : &#39;false&#39;,//是否级联选中
   onlyLeafCheck : &#39;true&#39;, //是否只有leaf节点有checkbox
   lines : true,//是否显示线
   onClick : function(node) {
    //点击
    /* var leaf = $(&#39;#tt&#39;).tree("isLeaf", node.target); //判断是否为leaf
     if(leaf){
     arr.push(node.id);
     } */
    $(&#39;#tt&#39;).tree("toggle", node.target);//点击父节点和点击父节点前面的+号一样能展开
   },
   onLoadError : function(node, data) {
    alert("查询不到数据,树形加载失败");
    return;
   },
   onCheck : function(node, checked) {
    if (checked) {
     //arr.push(node);
    } else {
     //arr.remove(node);
    }
   }
  /* onBeforeLoad:function(node,param){
   param.screeningTxt = $("#screeningTxt").val();
  }*/
  });
  $("#groupuser").modal("show");//显示模态框,
 }     
  //接口方法,外面的jsp通过调用这个方法来弹出人员树模态框,且希望只能调用这个方法
 //展示人员数,右边有默认值
 //参数havaDefault表示是否有默认值,注意,批量设置不能够有默认值 布尔值:true,false
 //参数loginNameDisplayNameStr是longinName和displayName的组合字符串,例如有三个人:"zhangsan-张三,lisi-李四,wangwu-王五",如果没有默认值,就设置为null     
  //参数method表示方法名称,即你点击确定之后返回的人员的处理方法名称,注意这个方法规定参数只能有一个,那就是人员登陆名的一个字符串,多个人用";"隔开  
  //参数groupId表示传入到后台的一个参数。在本项目中,由于需要根据条件查询出不同公司/部门下的人员,所以传入了部门ID,若没有,可以为null
 function showTreeDefault(loginNameDisplayNameStr, method, havaDefault,groupId) {
  arr = [];//需要设置为全局变量
  fn = method;
  if (!havaDefault) {
   showTree(groupId);
   return;
  }
  if (loginNameDisplayNameStr!=null) {
   //alert(loginNameDisplayNameStr);
   //加载默认值到树的右边边框
   var result = loginNameDisplayNameStr.split(",");
   for (var i = 0; i < result.length; i++) {
    var user = result[i].split("-");
    var loginName = user[0];
    var displayName = user[1];
    var ul = document.getElementById("names");
    var li = document.createElement("li");
    li.setAttribute("value", loginName);
    li.setAttribute("ondblclick", "$remove(this)");
    li.innerHTML = displayName;
    ul.appendChild(li);
    arr.push(loginName);
   }
  }
  showTree(groupId);
 }
 function modelCheckAssessors() {
  if (arr.length != 0) {              //将登录名数组以";"隔开组成一个字符串
   var loginNameStr = arr.join(";");
   returnVal(loginNameStr);
  } else {
   returnVal(null);
  }
 }
 function returnVal(retArr) {
  //调用处理逻辑方法
  window[fn](retArr);
  //关闭模态框
  modalHide();
 }
 function modalHide() {
  //清空右边li的数据
  $(&#39;ul li&#39;).remove();
  $("#groupuser").modal("hide");
 }
 function $add() {
  var nodes = $(&#39;#tt&#39;).tree(&#39;getChecked&#39;);
  if (nodes.length != 0) {
   for (var i = 0; i < nodes.length; i++) {
    var loginName = nodes[i].id;
    var userName = nodes[i].text;
    addEleInMainBox(loginName, userName);
    $(&#39;#tt&#39;).tree(&#39;uncheck&#39;, nodes[i].target);//去掉选中的
   }
  }
 };
 function addEleInMainBox(loginName, userName) {
  //1.判断当前p中是否已经存在该loginName,如果有重复的则不添加
  if (arr.Exists(loginName)) {
   //alert("已经存在"+loginName+",不再添加");
   return;
  }
  //2.添加该评估人到li中
  var ul = document.getElementById("names");
  var li = document.createElement("li");
  li.setAttribute("value", loginName);
  li.setAttribute("ondblclick", "$remove(this)");
  li.innerHTML = userName;
  ul.appendChild(li);
  arr.push(loginName);
 }
 function $remove(obj) {
  var loginName = obj.getAttribute("value");
  obj.parentNode.removeChild(obj);
  arr.remove(loginName);
 }
 Array.prototype.remove = function(val) {
  var index = this.indexOf(val);
  if (index > -1) {
   this.splice(index, 1);
  }
 };
 Array.prototype.Exists = function(v) {
  var b = false;
  for (var i = 0; i < this.length; i++) {
   if (this[i] == v) {
    b = true;
    break;
   }
  }
  return b;
 };
</script>
を含める必要があります。添付の​​背景コードは、Java バックグラウンドでこのツリーを検索する方法です

//选择评估人-树形结构
 @RequestMapping(value = "chooseAssessorTree")//这里不要指定请求方式
 public void chooseAssessorTree(HttpServletRequest req,HttpServletResponse res){
   //每次点击节点的时候会传入一个节点ID值<br data-filtered="filtered">      String id = req.getParameter("id");
   //第一次加载树时选择的区域
   String groupId = req.getParameter("groupId");
   List<Map<String,Object>> list=userService.queryJSAssessor(id,groupId);
   BuildJSON.printToClient(req, res, arrayBuilder(list));
 }
 //获得树值
 private JSONArray arrayBuilder(List<Map<String,Object>> list) {
  JSONArray arr = new JSONArray();
  if (list != null && list.size() > 0) {
   for (int i=0;i<list.size();i++) {
    JSONObject obj = new JSONObject();
    Map map=list.get(i);
    String userImg=map.get("userImg").toString();
    if (userImg.equals("1")) {//表示到了叶子节点,选择出人
     obj.put("id", map.get("loginName"));
     obj.put("text", map.get("displayName"));
     obj.put("state", "open");
     //obj.put("iconCls", "icon-user2-gj");
    }else{
     obj.put("id", map.get("groupId"));
     obj.put("text", map.get("groupName"));
     obj.put("state", "closed");
    }
    arr.add(obj);
   }
  }
  return arr;
 }
です。
dao クエリメソッド

/**查询树结构的人员以及部门数据
  * @param parentGroupId
  * @param groupId 第一次加载树查询的 区域 例如是成都分公司,则查询出成都分公司下面的部门以及人员
  * @return
  */
 List<Map<String, Object>> queryJSAssessor(@Param("parentGroupId") String parentGroupId, @Param("groupId")String groupId);  

対応する xml

<select id="queryJSAssessor" resultType="Map" parameterType="String">
  SELECT
    e.loginName,
    e.displayName,
    e.groupId,
    e.groupCode,
    e.groupName,
    e.disOrder,
    e.userImg
    FROM
    (SELECT s.loginName,s.displayName,s.groupId,s.groupCode,s.groupName,s.disOrder,s.userImg FROM
     (SELECT &#39;0&#39; loginName,
       &#39;0&#39; displayName,
      fg.ID groupId,
      fg.CODE groupCode,
      fg.NAME groupName,
      fg.DISPLAY_ORDER disOrder,
      isnull((select count(id) FROM FND_GROUP where PARENT_ID=fg.ID),0) groupLeaf,
      (select COUNT(1) from FND_USER_GROUP fug, FND_USER fu where fug.USER_ID = fu.ID and fug.GROUP_ID = fg.ID) userLeaf,
      0 userImg
     FROM FND_GROUP fg
     WHERE fg.ENABLE_FLAG = &#39;Y&#39;
     <if test="parentGroupId != null and &#39;&#39; != parentGroupId">
      AND fg.PARENT_ID = #{parentGroupId}
     </if>
      <if test="parentGroupId == null or &#39;&#39; == parentGroupId">
       <if test="groupId!=null and &#39;&#39; !=groupId">
        AND fg.PARENT_ID = #{groupId}
       </if>
       <if test="groupId==null or &#39;&#39;==groupId">
       AND fg.GROUP_LEVEL = 0
       </if>
      </if>
      )s WHERE s.groupLeaf>0 OR s.userLeaf>0
   UNION ALL 
     SELECT fu.LOGIN_NAME loginName,
       fu.DISPLAY_NAME displayName,
       fg.ID groupId,
      fg.CODE groupCode,
      fg.NAME groupName,
      fg.DISPLAY_ORDER disOrder,
      1 userImg
    FROM FND_USER fu 
    LEFT JOIN FND_USER_GROUP fug ON fu.ID=fug.USER_ID
    LEFT JOIN FND_GROUP fg ON fug.GROUP_ID=fg.ID
     WHERE fu.ENABLE_FLAG = &#39;Y&#39;
      AND fug.PRIMARY_FLAG=&#39;Y&#39;
     AND fg.NAME!=&#39;&#39;
     AND fu.LOGIN_NAME!=&#39;&#39;
     AND fu.DISPLAY_NAME!=&#39;&#39;
     AND fu.MOBILE!=&#39;&#39;
     <if test="parentGroupId != null and &#39;&#39; != parentGroupId">
      AND fug.GROUP_ID = #{parentGroupId}
     </if>
     <if test="parentGroupId == null or &#39;&#39; == parentGroupId">
       <if test="groupId!=null and &#39;&#39; !=groupId">
        AND fug.GROUP_ID = #{groupId}
       </if>
       <if test="groupId==null or &#39;&#39;==groupId">
       AND fg.GROUP_LEVEL = 0
       </if>
      </if>
      )e
   ORDER BY userImg, CAST(disOrder AS int)
 </select>

最後に、JSP と使用例

<%--
 Created by IntelliJ IDEA.
 User: zht
 Date: 2017/7/18
 Time: 20:36
 To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sino" tagdir="/WEB-INF/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
 <title>专项评估 > 任务分发</title>
 <script src="${ctx}/static/scm/js/commonDialog.js" type="text/javascript"></script>
 <link href="${ctx}/static/sinoprof/core/css/menu-dropdown.css" rel="external nofollow" type="text/css" rel="stylesheet"/>
 <script src="${ctx}/static/sinoprof/core/js/namespace.js" type="text/javascript"></script>
 <script src="${ctx}/static/sinoprof/core/js/lookupDialogRemember.js" type="text/javascript"></script>
 <script src="${ctx}/static/scm/js/taskEditExcelData.js" type="text/javascript"></script>
 <script src="${ctx}/static/scm/js/bootstrap-filestyle.js" type="text/javascript"></script>
 <link href="${ctx}/static/lib/jquery-easyui/themes/default/easyui.css" rel="external nofollow" rel="external nofollow"  type="text/css" rel="stylesheet" />
 <script src="${ctx}/static/lib/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
 <sino:sinoflow ctx="${ctx}" SFActInfo="${SFActInfo}"/>
 <style type="text/css">
  .table tbody td:nth-child(1n) {
   text-align: center;
   vertical-align: middle;
  }
  .mr15 {
   margin-right: 15px;
  }
 </style>
</head>
<body>
<form:form id="appform" name="specialTask" class="form-horizontal" role="form"
   action="${ctx}/scm/special/distribute/submit" method="post">
 <input type="hidden" id="Launch_Code" />
 <input type="hidden" id="APPL_COLUMN4">
 <input type="hidden" id="loginIds" name="loginIds" >
 <input type="hidden" id="Launch_Code_Bypass" value="C1">
 <input type="hidden" id="groups" name="groups" value="${flowGroups}">
 <input type="hidden" id="sf_actID" value="${sf_actID}">
 <input type="hidden" id="nextLoginName" value="${nextLoginName}">
 <p class="control-group">
  <input type="hidden" name="taskId" value="${taskId}">
  <input type="hidden" name="taskName" value="${taskName}">
  <h2 id="taskName">${taskName}</h2>
  <input type="hidden" id="taskId" value="${taskId}">
  <p style="height: 70px">
   <p class="pull-right mr15">
    <button type="button" class="btn-cmcc" onclick="doSubmit();">任务分发</button>
   </p>
   <p class="pull-right mr15">
    <button id="cancelBtn" type="button" class="btn-cmcc" onclick="window.location.href=&#39;${ctx}/flow/workbench/pendingTray&#39;">关闭</button>
   </p>
  </p>
  <p class="group-header col-xs-12">
   <span class="title">本次评估信息</span>
   <p class="dropdown opts table-opts" data-table="3">
    <a class="btn-span" style="color:white" data-action="" onclick="checkAssessors(this,true);">批量设置评分人</a>
    <a class="btn-span" style="color:white" data-action="" onclick="removeAssessors(this,true);">批量清空评分人</a>
   </p>
  </p>
  <p class="form-group" >
   <p class="col-md-12">
    <table class="col-md-12 table table-striped table-bordered table-hover">
     <thead>
     <tr>
      <td style="width:3%"><input type="checkbox" id="selectAll" name="selectAll"/></td>
      <th style="width:4%">序号</th>
      <th style="width:35%">协议/合同名称</th>
      <th style="width:23%">评估供应商</th>
      <th style="width:20%">评估人</th>
      <th style="width:15%">评估模板</th>
     </tr>
     </thead>
     <tbody>
     <c:forEach items="${specialTaskLineList}" var="line" varStatus="status">
      <tr>
       <td><input type="checkbox" name="chkItem" value="${line.taskLineSetId}"></td>
       <th>${status.index+1}
        <input type="hidden" name="taskLineId" value="${line.taskLineId}">
        <input type="hidden" name="taskLineSetId" value="${line.taskLineSetId}">
        <input type="hidden" name="objectType" value="${line.objectType}">
       </th>
       <td>${line.contractName}</td>
       <td>${line.vendorName}</td>
       <td class="assessorsTd" name="assessorsTd" style="text-align:left; color:#E69500">
        <c:if test="${line.userNames !=null}">
         <a onclick="checkAssessors(this,false);"style="color:#E69500" > ${line.userNames}</a>
         <!-- <a onclick="removeAssessors(this,false);" >清空</a> -->
         <input type="hidden" name="userNames" value="${line.userNames}" />
         <input type="hidden" class="loginNames" name="loginNames" value="${line.loginNames}" />
         <input type="hidden" name="loginNameDisplayNameStr" value="${line.loginNameDisplayNameStr}" />
         <input type="hidden" name="flowGroups" value="${line.flowGroups}" />
        </c:if>
        <c:if test="${line.userNames ==null}">
         <a onclick=&#39;checkAssessors(this,false);&#39; style=&#39;color: red&#39;>设置评估人</a>
        </c:if>
       </td>
       <td> <a href="##" rel="external nofollow" onclick="showIndicatorsDetail(this)">${line.templetName}</a></td>
      </tr>
     </c:forEach>
     </tbody>
    </table>
   </p>
  </p>
 </p>
</form:form>
 <jsp:include page="/WEB-INF/views/workflow/workbench/userTree.jsp" />
<%-- <%@ include file="../../../../static/scm/userTree.jsp"%> --%>
<script type="text/javascript">
 $(function () {
  //全选、取消全选的事件
  $("#selectAll").click(function () {
   $("input[name=&#39;chkItem&#39;]").prop("checked", this.checked);
  });
 });
 function assessorsValidate(){
  var flag=true;
  $(".assessorsTd").each(function(){
   var validateMedium=$(this).find("input[name=&#39;loginNames&#39;]").val();
   if(!validateMedium){
    flag=false;
    msgAlert("评估人未设置");
    return false;
   }
  });
  return flag;
 }
 function do_Validate_Save() {//流程“暂存”前由流程引擎自动调用,如果该函数返回false,流程引擎中止“暂存”操作
  if ($("#appform").valid()&&assessorsValidate()) {
   return true;
  }else{
   return false;
  }
 }
 //提交数据
 function doSubmit() {
  var companyId = $("#companyId").val();
  if(companyId =="00"){
   $("#Launch_Code").val("B");
  }else {
   $("#Launch_Code").val("A");
  }
  if (do_Validate_Save()){
   var assessors=new Array();
   $(&#39;.loginNames&#39;).each(function(index){
    var arrayEach=($(this).val()).split(",");
    for(var i=0;i<arrayEach.length;i++){
     if(assessors.indexOf(arrayEach[i])<0){
      assessors.push(arrayEach[i]);
     }
    }
   });
   assessors=assessors.join(";");
   if($("#nextLoginName").val()){
    $("#loginIds").val($("#nextLoginName").val());
   }else {
    $("#loginIds").val(assessors);
   }
   if(checkAppraiser()){
    do_p_Complete_Start();
   }else {
    msgAlert("存在指标评估人为空");
   }
  }
 }
 function checkAppraiser(){
  var flag = true;
  var taskId = $("#taskId").val();
  $.ajax({
   url:"${ctx}/scm/special/distribute/checkAppraiser",
   type:"post",
   dataType:"json",
   async:false,
   data:{"taskId":taskId},
   success:function(result){
    if(result>0){
     flag = false;
    }
   }
  });
  return flag;
 }
 //选择评估人
 function checkAssessors(obj,flag) {
  if(flag&& $("input[name=&#39;chkItem&#39;]:checked").length == 0){
   msgAlert("请选择要设置的行。");
   return;
  }
  arr = [];//需要设置为全局变量
  var method="dealMethod";
  if(!flag){
    var taskLineSetId = $(obj).parents("tr").find("input[name=&#39;taskLineSetId&#39;]").val();
    //这里的ModaltaskId为模态框里面的id值,表示需要修改的行,该列表示可以传递的参数
    $("#ModaltaskLineId").val(taskLineSetId);
    //获取评估人信息loginName和displayNameStr(默认值)
    var loginNameDisplayNameStr = $(obj).parents("tr").find("input[name=&#39;loginNameDisplayNameStr&#39;]").val();
    showTreeDefault(loginNameDisplayNameStr,method,true);
  }
  //批量设置评估人
  else{
    var check = $("input[name=&#39;chkItem&#39;]:checked");
    var taskLineIdStr="";
    check.each(function (index) {
     if(index==0){
      taskLineIdStr=$(this).val();
     }else{
      taskLineIdStr+=","+$(this).val();
     }
   }); 
   $("#ModaltaskLineId").val(taskLineIdStr);
   showTreeDefault(null,method,false);
  }
 }
 //判断是否是批量设置评估人,如果是批量,循环处理(本方法也是模态框处理方法)
 function dealMethod(loginNames){
   if(loginNames==null){
    alert("评估人不能为空,设置失败!");
    return ;
   }
   var taskLineSetIdStr = $("#ModaltaskLineId").val();
   $.commonDialog.showProgress(&#39;${ctx}&#39;, &#39;正在设置评估人,请稍候...&#39;);
   saveAppraiser(taskLineSetIdStr,loginNames);
 }
 function saveAppraiser(taskLineSetIdStr,loginNames) {
  $.ajax({
   url:"${ctx}/scm/special/distribute/saveAppraiser",
   type:"post",
   dataType:"json",
   async:false,
   data:{"taskLineSetIdStr":taskLineSetIdStr,"loginNames":loginNames},
   success:function(result){
    window.location.reload();
   }
  });
 }
 function removeAssessors(obj,flag) {
  if(flag&& $("input[name=&#39;chkItem&#39;]:checked").length == 0){
   msgAlert("请选择要设置的行。");
   return;
  }
  msgConfirm("是否确认清空?",
    function () {
     $.commonDialog.showProgress(&#39;${ctx}&#39;, &#39;正在删除,请稍候...&#39;);
     $("#nextLoginName").val("");
     if(flag){
      $("input[name=&#39;chkItem&#39;]:checked").each(function () {
       removepeople($(this).parents("tr").find("td input[name =&#39;loginNames&#39;]"));
      });
     }else {
      removepeople(obj);
     }
     window.location.reload();
//     $.commonDialog.hiddenProgress();
    }
  );
 }
 function removepeople(obj) {
  var taskLineSetId = $(obj).parents("tr").find("th input[name=taskLineSetId]").val();
  $.ajax({
   url:"${ctx}/scm/special/distribute/delAppraiser",
   type:"post",
   dataType:"json",
   async:false,
   data:{"taskLineSetId":taskLineSetId},
   success:function(result){
//    if(result ==&#39;Y&#39;){
//     $(obj).parent("td") .html("<a onclick=&#39;checkAssessors(this,false);&#39; style=&#39;color: red&#39;>设置评估人</a>");
//    }
   }
  });
 }
 function showIndicatorsDetail(obj) {
  var loginNames = $(obj).parents("tr").find("td input[name=loginNames]").val();
  var taskLineId = $(obj).parents("tr").find("th input[name=taskLineId]").val();
  var objectType = $(obj).parents("tr").find("th input[name=objectType]").val();
  var sf_actID = $("#sf_actID").val();
  if(loginNames){
   window.location.href= "${ctx}/scm/special/distribute/indicatorsEdit?taskLineId="+taskLineId+"&objectType="+objectType+"&sf_actID="+sf_actID;
  }else {
   msgAlert("请先设置评估人!");
  }
 }
</script>
</body>
</html>

関連する推奨事項:

ztree は左側に動的生成ツリーとコンテンツの詳細を実装します関数の例は右側で共有しています

zTree jQuery ツリー プラグインの使用の詳細な例

ztree を使用してツリー テーブルを実装する jQuery の詳細な例

以上がEasyUI は人事ツリーのサンプル コードを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、