&>&利用jOrgChart插件异步加载数据生成组织架构图
利用jOrgChart插件异步加载数据生成组织架构图
上传大小：53KB
（1）将数组生成树形数组结构，返回到前台。
（2）使用jOrgChart插件，根据返回的数据将其子节点加入到相应的&li&&/li&中。
综合评分：4.3（55位用户评分）
下载个数：
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var q = $("#form1").serializeArray();
console.log(q);
var res_area_r = $.trim($(".res_area_r").val());
if (res_area_r == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
var mess = $(".res_area_r").val();
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, _username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click",'.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
$(".res_area_r").val($.trim($(".res_area").val()));
评论共有37条
还不错，可以用
感谢分享，先看看怎么用。
先看看怎么用
做组织架构图很合适！
无法直接运行
效果还是不错的，已经用于项目中了，多谢作者。
很不错，已经用了，针对很好，thk
非常好，谢谢分享。
无法直接运行，还得经过自己的加工才能用
还可以吧，帮别人下载的
审核通过送C币
8套PHP视频精选教程
创建者：love
PHP学习电子书
[资源优选]第十七期：20个热门的PHP相关源码
创建者：nigelyq
上传者其他资源上传者专辑
sublime-imfix.c
easyui插件源文件教程实例
开发技术热门标签
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
利用jOrgChart插件异步加载数据生成组织架构图
会员到期时间：
剩余下载个数：
剩余C币：593
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
(仅够下载10个资源)
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
linruonan90
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
利用jOrgChart插件异步加载数据生成组织架构图最近的工作是做web移动应用开发，其中涉及到地图这一块。考虑到国内网络环境，决定用百度地图。问题来了，进入地图界面的入口有几个。而且都有不同的功能需求，有些需要定位，有些除了定位还需要加上导航。所以我就封装了一下代码，代码如下：
var BaiDu = {
MarkerData: [],
Map: null,
IsLoadScript: false,
IsInitialize: false,
NextList: [],
DingWeiCtrl: null,
MyPoint: null,
ToPoint: null,
Driving: null,
Point0: null,
Point1: null,
Polyline: null,
BeginMark:null,
//加载百度地图js
Load: function (next) {
BaiDu.NextList =
if (!BaiDu.IsLoadScript) {
var script = document.createElement("script");
script.src = "http://api./api?v=1.3&callback=BaiDu.Initialize";
document.body.appendChild(script);
BaiDu.IsLoadScript =
BaiDu.NextDo();
//加载百度地图
Initialize: function () {
if (!BaiDu.IsInitialize) {
BaiDu.Map = new BMap.Map('bdmap');
// 定义一个放大控件类
function JiaControl() {
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
this.defaultOffset = new BMap.Size(10, 70);
// 定义一个缩小控件类
function JianControl() {
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
this.defaultOffset = new BMap.Size(10, 100);
// 定义一个定位控件类
function DingWeiControl() {
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
this.defaultOffset = new BMap.Size(10, 40);
JiaControl.prototype = new BMap.Control();
JianControl.prototype = new BMap.Control();
DingWeiControl.prototype = new BMap.Control();
// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
JiaControl.prototype.initialize = function (map) {
// 创建一个DOM元素
var div = document.createElement("img");
// 设置样式
div.src = 'lib/image/icon/add.png';
div.id = 'mapJia';
// 添加DOM元素到地图中
BaiDu.Map.getContainer().appendChild(div);
// 将DOM元素返回
JianControl.prototype.initialize = function (map) {
var div = document.createElement("img");
div.src = 'lib/image/icon/minus.png';
div.id = 'mapJian';
BaiDu.Map.getContainer().appendChild(div);
DingWeiControl.prototype.initialize = function (map) {
var div = document.createElement("img");
div.src = 'lib/image/icon/location.png';
div.id = 'mapDingWei';
BaiDu.Map.getContainer().appendChild(div);
// 创建控件实例
var myJiaCtrl = new JiaControl();
var myJianCtrl = new JianControl();
BaiDu.DingWeiCtrl = new DingWeiControl();
// 添加到地图当中
BaiDu.Map.addControl(myJiaCtrl);
BaiDu.Map.addControl(myJianCtrl);
BaiDu.Map.addControl(BaiDu.DingWeiCtrl);
Ext.get('mapJia').on('tap',
function () {
BaiDu.Map.zoomTo(BaiDu.Map.getZoom() + 1);
Ext.get('mapJian').on('tap',
function () {
BaiDu.Map.zoomTo(BaiDu.Map.getZoom() - 1);
Ext.get('mapDingWei').on('tap',
function () {
BaiDu.Location();
//中心位置
var point = new BMap.Point(104..665531);
BaiDu.Map.centerAndZoom(point, 13);
BaiDu.Map.enableScrollWheelZoom();
//添加版权控件
var cr = new BMap.CopyrightControl({
anchor: BMAP_ANCHOR_TOP_RIGHT
BaiDu.Map.addControl(cr);
var bs = BaiDu.Map.getBounds();
cr.addCopyright({
content: '&img
src="lib/image/icon/baiduIco.png" /&',
bounds: bs
BaiDu.IsInitialize =
BaiDu.NextDo();
Location: function () {
var onSuccess = function (position) {
if (Ext.os.is.Android || Ext.os.name == "Linux") {
BaiDu.MyPoint = new BMap.Point(position.Longitude, position.Latitude);
BaiDu.MyPoint = new BMap.Point(position.coords.longitude, position.coords.latitude);
var icon = new BMap.Icon("lib/image/icon/my_markers.png", new BMap.Size(35, 35), {
imageOffset: new BMap.Size(-0, -0),
infoWindowAnchor: new BMap.Size(10, 1),
offset: new BMap.Size(6, 21)
var mk = new BMap.Marker(BaiDu.MyPoint, {
icon: icon
BaiDu.Map.addOverlay(mk);
BaiDu.Map.panTo(BaiDu.MyPoint); //将中心移动到我的位置
setTimeout(function () {
BaiDu.DingWeiCtrl._container.src = 'lib/image/icon/location.png';
BaiDu.NextDo();
var onError = function (error) {
setTimeout(function () {
BaiDu.DingWeiCtrl._container.src = 'lib/image/icon/location.png';
BaiDu.MyPoint =
BaiDu.NextDo();
BaiDu.DingWeiCtrl._container.src = 'lib/image/location.gif';
if (Ext.os.is.Android) {
Pt.Get(onSuccess, onError);
navigator.geolocation.getCurrentPosition(onSuccess, onError);
//添加坐标
AddMarker: function () {
if (this.MarkerData.length &= 0) {
$.post(BaseUrl, {
handler: 'branch',
index: '1'
function (data) {
BaiDu.MarkerData =
BaiDu.AddMarkerData(data);
BaiDu.AddMarkerData(BaiDu.MarkerData);
BaiDu.NextDo();
//添加坐标
AddMarkerData: function (data) {
BaiDu.Map.clearOverlays();
var lblList = [];
var iconImg = BaiDu.CreateIcon();
for (var i = 0; i & data. i++) {
data[i].name = data[i].name.replace("迷尚", "");
var json = data[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0, p1);
var marker = new BMap.Marker(point, {
icon: iconImg
var label = new BMap.Label(json.name, {
"offset": new BMap.Size(15, 0)
marker.setLabel(label);
BaiDu.Map.addOverlay(marker);
label.setStyle({
borderColor: "#808080",
color: "#333",
cursor: "pointer",
display: "none"
lblList.push(label); (function () {
var _json =
var _marker =
var _label =
_marker.addEventListener("click",
function () {
_label.setStyle({
display: "block"
BaiDu.Point0 = _json.point.split("|")[0];
BaiDu.Point1 = _json.point.split("|")[1];
BaiDu.Load(['BeginNavigation']);
_label.addEventListener("click",
function () {
activityPhone = _json.
cafeteriaId = _json.
cafeteriaName = _json.
for (var i = 0; i & lblList. i++) {
lblList[i].setStyle({
display: "none"
rthis.showImgList();
Navigation: function () {
if (!this.Driving) {
this.Driving = new BMap.DrivingRoute(BaiDu.Map);
this.ToPoint = new BMap.Point(this.Point0, this.Point1);
this.Driving.search(this.MyPoint, this.ToPoint);
this.Driving.setSearchCompleteCallback(function () {
BaiDu.Map.removeOverlay(BaiDu.Polyline);
var pts = BaiDu.Driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
BaiDu.Polyline = new BMap.Polyline(pts);
BaiDu.Map.addOverlay(BaiDu.Polyline);
BeginNavigation: function () {
if (this.MyPoint) {
this.Load(['Navigation']);
this.Load(['Navigation', 'Location']);
CreateIcon: function () {
var icon = new BMap.Icon("lib/image/icon/ico-marker.png", new BMap.Size(25, 41), {
imageOffset: new BMap.Size(-0, -0),
infoWindowAnchor: new BMap.Size(10, 1),
offset: new BMap.Size(6, 21)
NextDo: function () {
if (BaiDu.NextList.length & 0) {
var nextDo = BaiDu.NextList[BaiDu.NextList.length - 1];
BaiDu.NextList.pop();
BaiDu[nextDo]();
用法如下BaiDu.Load(['Location', 'AddMarker']);执行顺序为倒叙执行虽然说以上代码满足了我的需求，不过每添加一个方法都要用NextDo(),总觉得不够优雅。想用异步队列的方式，在网上找了很多异步队列的资料都是云里雾里的，求高手指点。怎么样写一个异步队列处理js
该问题被发起重新开启投票
投票剩余时间：
之前被关闭原因：
该问题被发起删除投票
投票剩余时间：
距离悬赏到期还有：
参与关闭投票者：
关闭原因：
该问题已经被锁定
锁定原因：（）
保护原因：避免来自新用户不合宜或无意义的致谢、跟帖答案。
该问题已成功删除，仅对您可见，其他人不能够查看。
德问是一个专业的编程问答社区，请
后再提交答案
关注该问题的人
共被浏览 (4077) 次jQuery获取动态生成的元素示例
投稿：whsnow
字体：[ ] 类型：转载 时间：
页面上可以动态添加数据,比如table,点击按钮可以动态添加行，下面与大家分享下jQuery如何获取动态生成的元素
需求描述：页面上可以动态添加数据,比如table,点击按钮可以动态添加行。又或页面 加载时table数据是通过ajax从后台获取的。而这时我们想要获取其中的某个值,又该如何获取呢？ 如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live()方法
代码如下: $(".button").live("click",function(){ <($("#mytd").html()); })
而如果不是通过某个事件,当页面加载的时候我们就要获取值或进行其他操作 live()方法就不行了,因为我们无法传入一个事件。 比如以下代码：
代码如下: &body& &table id="tab" border="1" width="30%"& &/table& &/body& &script type="text/javascript"& $(function() { $.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){ <(data.table); $("#tab").append(data.table); }) alert($("#mytd").html()); //获取值 }); &/script&
以上代码很简单,就是通过post从后台返回的值添加到&table&中 后台返回数据为 &tr&&td id='mytd'&北京&/td&&td&深圳&/td&&/tr&而我们要在post之后获取id为mytd的值, 此时是获取不到的,我们从浏览器中就可以观察出问题： &从以上可以看出在alert的时候 数据并还没有加载出来 控制台也并没有打印出信息,所以此时是取不到数据的。 使用ajaxComplete()方法可以在请求完成时运行要执行的代码,我们修改为如下：
代码如下: $(function() { $.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){ <(data.table); $("#tab").append(data.table); }) $("#tab").ajaxComplete(function(){ //待请求完成时 执行 alert($("#mytd").html()); }) });
&此时再获取的时候页面已加载完数据。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具