jquery easyui树形

/*html

<tr>

<td width="50" align="right"><div class="divSty2"><label>请选择从业方向:</label></div></td>

<td>

<select id="txtjobDirection" class="easyui-combotree" multiple style="width:200px;"></select>

</td>

</tr>

<tr>

<td align="right" ><label >请选择区域:</label></td>

<td >

<div class="divSty5">

<label>省<select id="txtProvince" class="easyui-combobox" name="txtProvince" style="width:200px;"

editable="false" data-options="valueField:‘id‘,textField:‘text‘"></select></label>

<label>市/县<select id="txtCity" class="easyui-combotree" multiple style="width:200px;"

></select></label>

</div>

</td>

</tr>

*/

/**

* 判断非空

* @param val

* @returns {Boolean}

*/

function isEmpty(val) {

val = val.trim();

if (val == null)

return true;

if (val == undefined || val == ‘undefined‘)

return true;

if (val == "")

return true;

if (val.length == 0)

return true;

if (!/[^(^\s*)|(\s*$)]/.test(val))

return true;

return false;

};

function isNotEmpty(val) {

return !isEmpty(val);

};

/**

* 从业方向下拉选择

*/

function queryJobDirection(){

$.get("queryJobDirection.action",function(obj){

var catN = obj.data.length;

var data = [{"id":"root","text":"全部","checked":true,children:[]}];

for(var i=0;i<catN;i++){

var childsN = obj.data[i].childs.length;

var res ={"id":"","text":obj.data[i].childs[0].catalogName,children:[]};

for(j=0;j<childsN;j++){

var children = {"id":obj.data[i].childs[j].id,"text":obj.data[i].childs[j].name};

res.children.push(children);

}

data[0].children.push(res);

}

$("#txtjobDirection").combotree("loadData",data);

});

}

/**

* 省下拉选择

*/

function province(){

$.get("queryRootArea.action",function(obj){

var catN = obj.data.length;

var data = [];

for(var i=0;i<catN;i++){

var res ={"id":obj.data[i].id,"text":obj.data[i].name};

data.push(res);

}

$("#txtProvince").combobox("loadData",data);

});

}

/**

* 点击省事件

*/

function eventProvince(){

$("#txtProvince").combobox({

onSelect: function(param){

var parentId =$("#txtProvince").combobox("getValue");

$.post("queryChildArea.action",{"parent":parentId},function(obj){

var catN = obj.data.length;

var data = [];

for(var i=0;i<catN;i++){

var res ={"id":obj.data[i].id,"text":obj.data[i].name,children:[]};

data.push(res);

}

$("#txtCity").combotree("loadData",data);

});

}

});

}

/**

* 点击市事件

*/

function eventCity(){

$(‘#txtCity‘).combotree({

onSelect: function(node){

if(node.children.length == 0){

$.post("queryChildArea.action",{"parent":node.id},function(obj){

var catN = obj.data.length;

var data = [];

for(var i=0;i<catN;i++){

var res ={"id":obj.data[i].id,"text":obj.data[i].name};

data.push(res);

}

$(‘#txtCity‘).combotree("tree").tree(‘append‘,{parent:node.target,data:data});

});

}

}

});

}

/**

* 删数组个下标

*/

Array.prototype.baoremove = function(dx){

if(isNaN(dx)||dx>this.length){return false;}

this.splice(dx,1);

}

/**

* 添加数组中的值

*/

Array.prototype.insert = function (index, item) {

this.splice(index, 0, item);

};

/**

* 推送按钮事件

*/

function eventBtn(){

$("#btnPush").click(function(){

var jobDirections = $(‘#txtjobDirection‘).combotree(‘getValues‘);

if(jobDirections.length == 0){

$.messager.alert("提示","请选择从业方向!!","info");

return;

}else{

if(jobDirections[0] == "root"){

jobDirections = ["root"];

}else{

for(var key in jobDirections){

if(jobDirections[key] == ""){

jobDirections.baoremove(key);

}

}

}

}

jobDirections = JSON.stringify(jobDirections)

var Province = $(‘#txtProvince‘).combobox(‘getValue‘);

if(isEmpty(Province)){

$.messager.alert("提示","请选择区域!!","info");

return;

}

var Citys = $(‘#txtCity‘).combotree(‘getValues‘);

if(Citys.length == 0){

Citys = [Province];

}else{

Citys.insert(0,Province);

}

Citys = JSON.stringify(Citys);

var InfoRate = $("input[name=‘rdoInfoRate‘]:checked").val();

var Identifion = $("input[name=‘rdoIdentifion‘]:checked").val();

var Business = $("input[name=‘rdoBusiness‘]:checked").val();

var Specialist = $("input[name=‘rdoSpecialist‘]:checked").val();

var Content = $.trim($("#txtContent").val());

var data ={

content:Content,

jobDirection:jobDirections,

area:Citys,

infoRate:InfoRate,

identifionAuth:Identifion,

businessAuth:Business,

specialistAuth:Specialist

}

$.post("addManpowerBlog.action",data,function(obj){

if (obj.status == 0) {

$.messager.alert("提示", obj.message, "info");

$("#txtContent").val("");

} else {

$.messager.alert("错误", obj.message, "error");

}

});

});

}

/**

* 点击市县下拉面板显示的时候触发。

*/

function showPanel(){

$("#txtCity").combotree({

onShowPanel: function(){

var Citys = $("#txtCity").combotree("tree").tree("getRoots");

if(Citys.length == 0){

$.messager.alert("提示","请选择省!!","info");

}

}

});

}

时间: 2024-10-24 11:48:10

jquery easyui树形的相关文章

Jquery Easy-UI 树形菜单的运用

一.树形菜单的右键标签 期中增加同级机构.增加下属机构.修改.删除分别是调用了addNode(),del()等方法. <div id="menuTree" class="easyui-menu" style="width: 120px;"> <SecurityTag:Authorize ID="Authorize12" runat="server" FunctionID="fun

jQuery EasyUI 教程

jQuery EasyUI 是一个基于 jQuery的javascript框架,集成了各种用户界面插件.jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点.本教程将告诉您如何使用 jQuery EasyUI 框架创建应用.现在开始学习 jQuery EasyUI!jQuery EasyUI 离线版CHM下载! jQuery EasyUI 教程目录 jQuery EasyUI 教程jQuery EasyUI 简介 jEasyUI 应用jEasyUI 创建 CRUD 应用j

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

Jquery easyui treegrid实现树形表格的行拖拽

前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自己太懒(对自己不是很熟悉的东西是不愿意第一去看的).结果选择良久,还是jquery easyui treegrid这个例子自己看起来比较熟悉.于是就专心研究了,从官方网站http://www.jeasyui.net/下载了demo,开始研读.先把jsp页面一些代码贴出 <link rel="s

雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务器. 在本教程中,我们将要创建一个注册表单,带有 name.address.city 字段.city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市. 创建表单(Form) title="Register" butto

JQuery EasyUI学习笔记

转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html  简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. 准备:下载:http://www.jeasyui.com/download/index.php 导入: <link rel="stylesheet" type="text/css" href="easyui/themes/default/e

04 jquery easyui 之 Tree

树(Tree)可以在一个空的 <ul> 元素中定义,可使用 javascript 加载数据. 在body中添加ul标签 <ul id="tt"></ul> 然后在使用javascript代码加载数据 使用JSON加载数据 $('#tt').tree({ url:'treedata.json'}); 树的数据格式(Tree Data Format) 每个节点可以包括下列属性: id:节点的 id,它对于加载远程数据很重要. text:要显示的节点文本.

初见jQuery EasyUI

什么是jQuery EasyUI ? 引用官网的一句话:jQuery EasyUI framework helps you build your web pages easily.其特点就就快速,灵活,简单. 本文借助自己的第一个B/S系统,简述一下jQuery EasyUI的相关功能.[本文采用纯前端处理,不涉及后台数据库,列表中数据是从Json文件中读取] 涉及知识点[每一个知识点都是一个组件]: dialog 一种特殊类型的窗口,扩展自window layout 布局容器有5个区域:北.南

jQuery EasyUI 入门简介

对于前端开发者来说,在开发过程中应用"框架"这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架--jQuery EasyUI. 那什么是jQuery EasyUI呢? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签.然后就可以