`

jstree和jquery easyui dialog 例子一

 
阅读更多
一:页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib  prefix="s" uri="/struts-tags" %>
<%response.setHeader("Pragma","No-cache"); 
response.setHeader("Cache-Control","no-cache"); 
response.setDateHeader("Expires", 0); 
response.flushBuffer();%> 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="0">
<title>部门列表</title>
<link rel="stylesheet" type="text/css" href="<s:url value='/resources/jquery-easyui-1.2.6/themes/default/easyui.css'/>"/>
<link rel="stylesheet" type="text/css" href="<s:url value='/resources/jquery-easyui-1.2.6/themes/icon.css'/>"/>
<script type="text/javascript" src="<s:url value='/resources/jquery-easyui-1.2.6/jquery-1.7.2.min.js'/>"></script>
<script type="text/javascript" src="<s:url value='/resources/jquery-easyui-1.2.6/jquery.easyui.min.js'/>"></script>
<link rel="stylesheet" type="text/css" href="<s:url value='/resources/css/list.css'/>"/>
<!-- jstree -->
	<script type="text/javascript" src="<s:url value='/resources/jsTree/version1/jquery.jstree.js'/>"></script>
	<link type="text/css" rel="stylesheet" href="<s:url value='/resources/jsTree/version1/xstyle.css'/>"/>
	<link type="text/css" rel="stylesheet" href="<s:url value='/resources/jsTree/version1/style.css'/>"/>
	<script type="text/javascript" src="<s:url value='/resources/jsTree/version1/script.js'/>"></script>
<!-- jstree -->
</head>

<script type="text/javascript">
$(function () {
	$("#demo").jstree({ 
			"plugins" : [ 
				"themes","json_data","ui","types","contextmenu" 
			],
			"json_data" : { 
				"ajax" : {
					"url" : "getDepartTreeJson.do",
					"cache":false,
					"data" : function (n) { 
						return { 
							//"operation" : "get_children", 
							//"id" : n.attr ? n.attr("id") : 1 
						}; 
					}
				}
			},
			"types" : {
				"max_depth" : -2,
				"max_children" : -2,
				"valid_children" : [ "drive" ],
				"types" : {
					"default" : {
						"valid_children" : "none",
						"icon" : {
							"image" : "../resources/jsTree/version1/images/file.png"
						}
					},
					"folder" : {
						"valid_children" : [ "default", "folder" ],
						"icon" : {
							"image" : "../resources/jsTree/version1/images/file.png"
						}
					},
					"drive" : {
						"valid_children" : [ "default", "folder" ],
						"icon" : {
							"image" : "../resources/jsTree/version1/images/folder.png"
						},
						"start_drag" : false,
						"move_node" : false,
						"delete_node" : false,
						"remove" : false
					}
				}
			},
			"contextmenu" :{
				
				  "items":{
	                "create" : {
	                    "label"             : "新增 ",
	                    "action"            : function (obj) { 
							$('#code').val("");
							$('#name').val("");
							$('#leader').val("");
							$('#pkId').val("");
               				$('#parentId').val(obj.attr("id"));
               			 	$('#dd').dialog('open');
               			 $('.panel-title').html('新增部门');
                			$('.window-shadow').hide();
               				$('.panel-tool').hide(); 
                },
	                    "separator_before"  : false,    
	                    "separator_after"   : true,     
	                    "icon"              : false                        
	                }, "rename" : {
	                    "label"             : "修改 ",
	                    "action"            : function (obj) { 
	                    var pkId=obj.attr("id")
			            var url="sysDepartObjview.do";
			            if(pkId){
			            $.ajax({
			    			url: url,
			    			type: "POST",
			    			datatype:'json',
			    			data: {
			    				"pkId" : pkId
			    			},
			    			success: function(opt){
			    				var opt = eval('(' + opt + ')'); 
			    				if(opt){
			    					$('#code').val(opt.code);
			    					$('#name').val(opt.name);
			    					$('#leader').val(opt.leader);
			    					$('#pkId').val(opt.pkId);
			    					
			    					$('#dd').dialog('open');
			               			$('.panel-title').html('编辑部门');
			                		$('.window-shadow').hide();
			               			$('.panel-tool').hide(); 
			    				}			 
			    			}
			    		});	
		}
                },
	                    "separator_before"  : false,    
	                    "separator_after"   : true,     
	                    "icon"              : false                        
	                },"启用" : {
	                    "label"             : "启用",
	                    "action"            : function (obj) {
	                    var pkId = obj.attr("id");
	                	var msg = "您确定启用该部门吗?";
	                	if (confirm(msg)==true){ 
	                		$.ajax({
	                			  url: "sysDepartObjstart.do",
	                			  type: "POST",
	                			  datatype:'json',
	                			  data: {"sysDepart.pkId":pkId},
	                			  success: function(opt){
	                				  $('#demo').jstree('refresh',-1);
	                			  }
	                		});
	                	}else{ 
	                		return false; 
	                	}	
	                    },
	                    "separator_before"  : false,    
	                    "separator_after"   : true,     
	                    "icon"              : false                        
	                },"禁用" : {
	                    "label"             : "禁用",
	                    "action"            : function (obj) {
	                    var pkId = obj.attr("id");
	                	var msg = "您确定启用该部门吗?";
	                	if (confirm(msg)==true){ 
	                		$.ajax({
	                			  url: "sysDepartObjend.do",
	                			  type: "POST",
	                			  datatype:'json',
	                			  data: {"sysDepart.pkId":pkId},
	                			  success: function(opt){
	                				  $('#demo').jstree('refresh',-1);
	                			  }
	                		});
	                	}else{ 
	                		return false; 
	                	}		
	                    },
	                    "separator_before"  : false,    
	                    "separator_after"   : true,     
	                    "icon"              : false                        
	                },"remove" :null,"ccp" : null
	                
	                    }
						}
		})
		.bind("select_node.jstree", function (event, data) { 
			            var pkId=data.rslt.obj.attr("id");
			            var url="sysDepartObjview.do";
			            if(pkId){
			            $.ajax({
			    			url: url,
			    			type: "POST",
			    			datatype:'json',
			    			data: {
			    				"pkId" : pkId
			    			},
			    			success: function(opt){
			    				var opt = eval('(' + opt + ')'); 
			    				if(opt){
			    					$('#dpt_code').html(opt.code);
			    					$('#dpt_name').html(opt.name);
			    					$('#dpt_person').html(opt.leader);
			    				}			 
			    			}
			    		});	
		}		            
			        })
		
 		.delegate("a", "click", function (event, data) { event.preventDefault(); })

	
});




//dialog
	$(function(){
			$('#dd').dialog({
				buttons:[{
					text:'保存',
					iconCls:'icon-ok',
					handler:function(){
						var code =$('#code').val();
						var parentId=$('#parentId').val();
						var name = $('#name').val();
						var pkId=$('#pkId').val();
						var leader=$('#leader').val();
						if(code=="" || code==null){
							alert("部门编号不能为空!");
							return false;
						}
						if(name=="" || name==null){
							alert("部门名称不能为空!");
							return false;
						}
						var url = "sysDepartObjadd.do";
						var param={'sysDepart.code':code,'sysDepart.name':name,'sysDepart.parentId':parentId,'sysDepart.leader':leader};
						if(pkId!= ""){
							url = "sysDepartObjupd.do";
							param={'sysDepart.code':code,'sysDepart.name':name,'sysDepart.leader':leader,'sysDepart.pkId':pkId};
							}else{
								if(parentId=="" || parentId==null){
									alert("上级部门错误!");
									return false;
								}
								}
						$.ajax({
							url: url,
							type: "POST",
							datatype:'json',
							data:param,
							success: function(opt){
								var opt = eval("("+opt+")");
								if(opt.valid == "true"){
									alert("保存成功!");
									$('#demo').jstree('refresh',-1);
									$('#dd').dialog('close');
								}else if(opt.valid == "false"){
									alert(opt.message);
								}
							}
						});
					}
				},{
					text:'取消',
					handler:function(){
						$('#dd').dialog('close');
					}
				}]
			});
			//隐藏dialog的背景层
			$('.window-shadow').hide();
			//初始化关闭dialog
			$('#dd').dialog('close');
	});



	


</script>
<style type="text/css">
.orifice_info_tab { 
	border-collapse: collapse; 
	border: none;
	width:422px; 
	heigth:200px;
} 
.orifice_info_tab td { 
	border: solid #000 1px; 
}
</style>
<body>

<!-- head -->
<!-- start tab -->
<div id="tt" class="easyui-tabs" tools="#tab-tools">
		<div title="部门查询" tools="#p-tools" >
<s:hidden name="valid" id="valid"></s:hidden>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="30">
    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
	      <tr>
	        <td height="24" class="headTd">
	        	<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
			            <td height="24">
			            	<table width="100%" border="0" cellspacing="0" cellpadding="0">
					              <tr>
					                <td width="6%" height="19" valign="bottom">
					                	<div align="center"><img src="<s:url value='/images/tb.gif'/>" width="14" height="14" /></div>
					                </td>
					                <td width="94%" valign="bottom">
					                	<span class="STYLE1" id="tit">部门列表</span>
					                </td>
					              </tr>
			            	</table>
			            </td>
		            <td>
		            	<div align="right">
		            		</div>
		            </td>
		          </tr>
	        	</table>
	       	</td>
	      </tr>
    </table></td>
  </tr>
</table>
		<div id="description">
			<div id="demo" class="demo" style="height:630px"></div>
		</div>
		<!-- 点击树显示详细信息 strat -->
	<div>
			<table class="orifice_info_tab">
				<tr>
					<td width="3%">部门编号</td>
					<td width="3%">部门名称</td>
					<td width="3%">负责人</td>
				</tr>
				<tr>
					<td width="3%"><s:label id="dpt_code"></s:label></td>
					<td width="3%"><s:label id="dpt_name"></s:label></td>
					<td width="3%"><s:label id="dpt_person"></s:label></td>
				</tr>
			</table>
	
			</div>
		<!-- 点击树显示详细信息 end -->
	</div>
		
</div>
	<!-- dialog start -->
	<div id="dd" icon="icon-save"  title="添加子部门" style="padding:5px;width:450px;height:200px;">
<input type="hidden" id="parentId">
<input type="hidden" id="pkId">
<table border="0"  cellspacing="1" cellpadding="0" width="99%" align="center" class="tableStriped">
	<tr class="tableStriped1">
		<td width="140px" class="formColor">
			<b><font color="red">*</font>部门编号</b>
		</td>
		<td width="210px">
			<s:textfield name="sysDepart.code" id="code" maxLength="50"></s:textfield>
			<span id="codeP"></span>
		</td>
	</tr>
	<tr class="tableStriped2">
	<td width="145px" class="formColor">
			<b><font color="red">*</font>部门名称</b>
		</td>
		<td width="210px">
			<s:textfield name="sysDepart.name" id="name"  maxLength="50"></s:textfield>
			<span id="nameP"></span>
		</td>
	</tr>
	<tr>
	<td class="formColor">
			<b>负责人</b>
		</td>
		<td>
			<s:textfield name="sysDepart.leader" id="leader" maxlength="50"></s:textfield>
		</td>
	</tr>
</table>
	</div>
	<!-- dialog end -->
	
</body>
</html>

二:jstree版本:jstree-v.pre1.0
三:代码
package com.gfs.sys.action;

import java.util.List;
import net.sf.json.JSONObject;
public class SysDepartAction extends BaseAction<SysDepart> {
	private static final long serialVersionUID = 1L;
	private List<SysDepart> departList;//系统部门列表
	private String json;
	private Integer isleaf; 
	@Override
	public String list() {
		param.put("deleteFlag", 1);
		orders.put("pkId", "desc");
		return super.list();
	}
	
	public String editObj() {
		validBefore();
		if (null != pkId && pkId.trim().length() > 0){
			this.object = (SysDepart)sysDepartService.findEntityById(SysDepart.class,pkId);
		}
		return SUCCESS;
	}
	
	// 修改
	public String updObj() {
	
		if(null!=object&&null!=object.getPkId()){
		getBaseService().update(object);
		valid = true;
		message = ConstantsMsg.UPD_SUCCESS;
		}else{
			valid = false;
			message = ConstantsMsg.UPD_FAILURE;
		}
		successResultUrl = "/valid.ftl";
		return "freemarker";
	}
	
	@Override
	public String addObj() {
	//	validBefore();
		if(object!=null){
			object.setDeleteFlag(1);
			if(null!=object.getParentId()&&object.getParentId().length()>0){
				SysDepart parent =(SysDepart)this.sysDepartService.findEntityById(SysDepart.class, object.getParentId());//查找上级部门
				if(null!=parent&&null!=parent.getSysOrg()){
					object.setSysOrg(parent.getSysOrg());
					//更新部门显示图片类型
					parent.setRel(SysDepart.IS_DRIVE);
					this.sysDepartService.update(parent);
				}
			}
			object.setIsLeaf(0);
			object.setRel(SysDepart.IS_FOLDER);
			getBaseService().create(object);
			valid = true;
			message = ConstantsMsg.CREATE_SUCCESS;
		}else{
			valid = false;
			message = ConstantsMsg.CREATE_FAILURE;
		}
		successResultUrl = "/valid.ftl";
		return "freemarker";
	}
	public String viewObj() {
		if (pkId != null) {
	    SysDepart d = (SysDepart)this.sysDepartService.findEntityById(SysDepart.class, pkId);
			if (d != null) {
				JSONObject JSONStr = JSONObject.fromObject(d);
				field = JSONStr.toString();
			}
		}
		successResultUrl = "/depart.ftl";
		return "freemarker";
	}
	/**
	 * 启用部门
	 * @return
	 */
	public String startObj(){
		if(null!=object && null!=object.getPkId()){
			updateDepartTree(object,1);
			valid = true;
			message = ConstantsMsg.UPD_SUCCESS;
		}else{
			valid = false;
			message = ConstantsMsg.UPD_FAILURE;
		}
		successResultUrl = "/valid.ftl";
		return "freemarker";
		
	}
	/**
	 * 禁用部门
	 * @return
	 */
	public String endObj(){
		if(null!=object && null!=object.getPkId()){
			updateDepartTree(object,0);
			valid = true;
			message = ConstantsMsg.UPD_SUCCESS;
		}else{
			valid = false;
			message = ConstantsMsg.UPD_FAILURE;
		}
		successResultUrl = "/valid.ftl";
		return "freemarker";
	}
	/**
	 * 启用/禁用树
	 * @param parentId
	 */
   private void updateDepartTree(SysDepart depart,Integer deleteFlag){
	   depart.setDeleteFlag(deleteFlag);
	   this.sysDepartService.update(depart);
	   List<SysDepart> list = sysDepartService.findChildSysDepartByParentId(depart.getPkId());
	   if(null!=list && list.size()>0){
		   for (SysDepart child : list) {
			   updateDepartTree(child,deleteFlag); 
		}
	   }
   }	
	
	/**
	 * 获取菜单树形结构
	 * @return
	 */
	public String getDepartTreeJson(){
		List<SysDepart> topDepartList = sysDepartService.findTopDepart();
		StringBuffer jsonStr = new StringBuffer();
		jsonStr.append("[");
		for (SysDepart sysDepart : topDepartList) {
			jsonStr.append(this.getChildDepartJson(sysDepart));
		}
		if(topDepartList != null && topDepartList.size() > 0){
		jsonStr.deleteCharAt(jsonStr.length() - 1);
	}
		jsonStr.append("]");
		
		this.json = jsonStr.toString();
	
		return SUCCESS;
	}

	/**
	 * 获取菜单子菜单
	 * @param menu
	 * @return
	 */
	private  StringBuffer getChildDepartJson(SysDepart depart){
		StringBuffer jsonStr = new StringBuffer();
		String departName = depart.getName();
		if(depart.getDeleteFlag()==0){
			departName = departName+"(已禁用)";
		}
		
		// 加入主信息
		if(null!=depart.getIsLeaf()&&depart.getIsLeaf()==1){
			jsonStr.append("{\"attr\":{\"id\":\""+depart.getPkId()+"\",\"rel\":\""+depart.getRel()+"\"},\"data\":\""+departName+"\",\"state\":\"\",");
		}else{
			jsonStr.append("{\"attr\":{\"id\":\""+depart.getPkId()+"\",\"rel\":\""+depart.getRel()+"\"},\"data\":\""+departName+"\",\"state\":\"\",");
		}
		// 查找并加入子信息
		List<SysDepart> childDepartList = sysDepartService.findChildSysDepartByParentId(depart.getPkId());
		if(childDepartList!=null && childDepartList.size()>0){
			jsonStr.append("\"children\":[");
			for(SysDepart child : childDepartList){
				jsonStr.append(getChildDepartJson(child));
			}
			jsonStr.deleteCharAt(jsonStr.length() - 1);
			jsonStr.append("]");
		}else{
			jsonStr.deleteCharAt(jsonStr.length() - 1);
		}
		jsonStr.append("},");
		return jsonStr;
	}

	@Override
	protected IBaseService getBaseService() {
		return sysDepartService;
	}

	@Override
	protected Class getEntity() {
		return SysDepart.class;
	}

	@Override
	protected void validBefore() {
		this.valid = true;
	}

	
	public SysDepart getSysDepart() {
		return object;
	}

	public void setSysDepart(SysDepart sysDepart) {
		this.object = sysDepart;
	}

	public String getJson() {
		return json;
	}

	public void setJson(String json) {
		this.json = json;
	}

	public List<SysDepart> getDepartList() {
		return departList;
	}

	public Integer getIsleaf() {
		return isleaf;
	}

	public void setIsleaf(Integer isleaf) {
		this.isleaf = isleaf;
	}


}


部分图:








  • 大小: 110.8 KB
  • 大小: 26.4 KB
  • 大小: 76.8 KB
分享到:
评论

相关推荐

    Jquery.easyUI js引用以及文档教程

    jQuery EasyUI 的核心依赖于 jQuery,因此 `jquery-1.7.2.min.js` 是必需的,它是 jQuery 的一个版本。`jquery.easyui.min.js` 是 EasyUI 的主库文件,包含了所有组件和功能的压缩版。在网页中,你需要先引入 ...

    初试JqueryEasyUI(附Demo)

    在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...

    jqueryEasyUI

    1. **引入库文件**:在 HTML 文件中引入 jQuery 和 jQuery EasyUI 的 CSS、JS 文件。 2. **准备 HTML 结构**:按照 EasyUI 的组件规范编写 HTML 结构,添加必要的类名和属性。 3. **初始化组件**:通过 JavaScript ...

    jQuery easyui 全套文件

    EasyUI 是基于 jQuery 的一组 UI 组件,它为开发者提供了诸如表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、对话框(dialog)等常见的网页元素。这些组件不仅具有丰富的样式,还内置了大量的功能,如...

    jquery.easyui例子(Demo)含有许多easyui库以及css样式

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一套丰富的 UI 组件,可以快速构建出...在实际开发中,结合这些例子和 CSS 样式,你能够快速构建出美观且功能丰富的 Web 应用。

    jquery easyUI

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的组件,帮助开发者快速构建具有专业外观和交互性的 Web 应用程序。这个框架的核心理念是通过简单的 JavaScript 调用来实现复杂的 UI 设计,从而减轻...

    jquery-easyui-1.5.3源代码(未压缩)

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的组件和便捷的API,用于快速构建交互式的Web应用。EasyUI 1.5.3 版本的源代码是开发者深入理解其内部工作原理、定制功能以及优化性能的重要参考资料。...

    jQueryEasyUI 1.1完整源代码

    1. **jQueryEasyUI 主要特性** - **组件丰富**: 包括对话框(dialog)、表单(form)、数据网格(datagrid)、树形控件(tree)、菜单(menu)等,满足多种页面构建需求。 - **主题支持**: 提供多种预设主题,可以...

    jquery easyui 中文文手册 以及js文件

    **jQuery EasyUI 中文手册与JS文件详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发者提供了大量的预定义的 UI 组件,使得构建功能丰富的 Web 应用变得简单而快捷。本手册旨在深入解析 jQuery EasyUI ...

    jquery easyui 模板

    - **引入库文件**:在 HTML 文件中,需要引入 jQuery、jQuery EasyUI 的 CSS 和 JS 文件。 - **初始化组件**:使用 `$(function(){})` 或 `$(document).ready(function(){});` 包裹代码,确保 DOM 加载完毕后再执行...

    Jquery easyUI 离线包

    - JQuery EasyUI是建立在JQuery基础之上的,JQuery是一个强大的JavaScript库,用于简化DOM操作、事件处理和动画制作。 - EasyUI提供了一套易于使用的UI组件,如表格、表单、对话框、菜单、树形结构、面板等,这些...

    jquery easyUI JS库和API 附加日期控件库My97DatePickerBeta.zip

    **jQuery EasyUI与My97DatePicker Beta:JS库与API详解** jQuery EasyUI是一个基于jQuery的前端框架,它提供了一套完整的用户界面组件,帮助开发者快速构建交互式的Web应用程序。这个框架大大简化了HTML页面的样式...

    1.[jQuery.EasyUI]第1章.jQuery.EasyUI入门

    其中 `1.[jQuery EasyUI]第1章 jQuery EasyUI入门.exe` 和 `第1章 jQuery EasyUI.pdf` 分别提供了电子书和PDF格式的教程,方便离线学习。 总结,jQuery EasyUI 作为一款强大的前端框架,极大地简化了 Web 开发过程...

    jQuery EasyUI 1.3.2 API离线文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和交互功能。1.3.2 版本是其历史版本之一,包含了一系列增强和改进。离线文档是为了方便开发者在没有网络的情况下查阅相关...

    jQuery EasyUI 3.1中文帮助手册

    jQuery EasyUI 包含了一系列预定义的CSS样式和JavaScript插件,这些插件主要基于jQuery库,实现了如对话框(dialog)、表单(form)、表格(datagrid)、菜单(menu)等常见的用户界面元素。通过简单的HTML标记和...

    jquery easyui下载教程

    1. **组件丰富**:jQuery EasyUI 提供了诸如对话框(dialog)、表格(datagrid)、树形控件(tree)、菜单(menu)等常见的Web UI元素,以及表单、按钮、布局、加载提示等组件,极大地简化了页面构建工作。...

    jquery.easyui.min

    1. **基础使用**:在HTML文件中引入“jquery.easyui.min.js”后,可以通过jQuery选择器选取元素,然后调用EasyUI的插件方法,如`$(element).datagrid(options)`来创建一个数据网格。 2. **布局管理**:EasyUI提供了...

    Jquery EasyUI 最新版本

    - 引入jQuery库和EasyUI CSS、JS文件。 - 定义HTML结构,添加必要的class和id属性。 - 初始化组件,通过JavaScript调用EasyUI提供的方法。 **4. 自定义和扩展** - 通过CSS覆盖默认样式,实现个性化设计。 - 利用...

    测试jquery easyui demo

    首先,jQuery EasyUI 是一个轻量级的框架,它提供了大量的UI组件,如对话框(dialog)、表格(datagrid)、菜单(menu)和表单控件,大大简化了前端开发工作。这个框架基于 jQuery,因此你需要对jQuery有一定的了解...

    jQuery EasyUI 1.5API 中文版

    在使用 jQuery EasyUI 时,首先需要在页面中引入 jQuery 和 jQuery EasyUI 的 CSS 和 JS 文件。然后,可以通过添加特定的类名到 HTML 元素上来应用组件样式,或者通过 JavaScript 调用 API 来实现动态交互。 三、...

Global site tag (gtag.js) - Google Analytics