jquery 有父母(或父母夫妇)的家谱[已完结]

pdkcd3nj  于 2022-12-03  发布在  jQuery
关注(0)|答案(3)|浏览(129)

**已关闭。**此问题不符合Stack Overflow guidelines。当前不接受答案。

我们不允许问题寻求书籍、工具、软件库等的建议。您可以编辑问题，以便使用事实和引文来回答。
3天前关闭。
Improve this question
我需要创建一个家庭树图（不完全像图像1，但类似），其中应该包含父亲和母亲（或任何其他）的关系，。
在图2中，你可以看到一个组织结构图，它部分地解决了我的问题，但是我没有“夫妇”关系。例如，Father - Mother/Grandfather - GrandMother，而不是parents。我需要“父”块是两个相互连接的块，一个是“母亲”，另一个是“父亲”（或者任何有关系的夫妇）。
目前我已经看到了很多组织图表（例如谷歌图表或jOrgChart），但没有“家族”树。
你能推荐一个库、脚本、操作方法、想法或任何东西来解决这个问题吗？
（抱歉，如果这是混乱的。如果需要其他信息来帮助我解决这个问题，请在评论）

jquery

3条答案

按热度按时间
ki1q1bka

ki1q1bka1#

我推荐你使用JavaScript和jQuery widget BasicPrimitives，more info here .它有你需要的特性，可以显示多对多的关系.

赞(0）分享  回复(0）举报  2022-12-03
64jmpszr

64jmpszr2#

下面是如何基于人与人之间关系实现家族图的代码示例。

<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>The very first family chart</title>

    <link rel="stylesheet" href="demo/js/jquery/ui-lightness/jquery-ui-1.10.2.custom.css" />
    <script type="text/javascript" src="demo/js/jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="demo/js/jquery/jquery-ui-1.10.2.custom.min.js"></script>

    <script  type="text/javascript" src="demo/js/primitives.min.js?219"></script>
    <link href="demo/css/primitives.latest.css?219" media="screen" rel="stylesheet" type="text/css" />

    <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function () {
            var options = new primitives.famdiagram.Config();

            var items = [
                { id: 1, title: "1", description: "", image: "demo/images/photos/m.png" },
                { id: 2, title: "2", description: "", image: "demo/images/photos/f.png" },
                { id: 3, title: "3", description: "",image: "demo/images/photos/m.png" },
                { id: 4, title: "4", description: "", image: "demo/images/photos/f.png" },
                { id: 5, parents: [1, 2], title: "5", description: "", image: "demo/images/photos/m.png" },
                { id: 6, parents: [3, 4], title: "6", description: "", image: "demo/images/photos/f.png" },
                { id: 8, parents: [5, 6], title: "8", description: "", image: "demo/images/photos/m.png" },
                { id: 7, parents: [5, 6], title: "7", description: "7", image: "demo/images/photos/f.png" },
                { id: 9, title: "9", description: "", image: "demo/images/photos/f.png" },
              { id: 12, title: "12", description: "", image: "demo/images/photos/m.png" },
              { id: 10, parents: [8, 9], title: "10", description: "", image: "demo/images/photos/m.png" },
              { id: 11, parents: [8, 9], title: "11", description: "", image: "demo/images/photos/f.png" },
              { id: 13, parents: [7, 12], title: "13", description: "", image: "demo/images/photos/m.png" },
              { id: 14, parents: [7, 12], title: "14", description: "", image: "demo/images/photos/f.png" }
            ];

            options.pageFitMode = 0;
            options.items = items;
            options.cursorItem = 2;
            options.linesWidth = 1;
            options.linesColor = "black";
            options.hasSelectorCheckbox = primitives.common.Enabled.False;
            options.normalLevelShift = 20;
            options.dotLevelShift = 20;
            options.lineLevelShift = 20;
            options.normalItemsInterval = 10;
            options.dotItemsInterval = 10;
            options.lineItemsInterval = 10;

            options.defaultTemplateName = "info";
            options.templates = [getInfoTemplate()];
            options.onItemRender = onTemplateRender;

            jQuery("#basicdiagram").famDiagram(options);
        });//]]>  

        function onTemplateRender(event, data) {
            switch (data.renderingMode) {
                case primitives.common.RenderingMode.Create:
                    /* Initialize widgets here */
                    break;
                case primitives.common.RenderingMode.Update:
                    /* Update widgets here */
                    break;
            }

            var itemConfig = data.context;

            if (data.templateName == "info") {
                data.element.find("[name=title]").text(itemConfig.title);
            }
        }

        function getInfoTemplate() {
            var result = new primitives.orgdiagram.TemplateConfig();
            result.name = "info";

            result.itemSize = new primitives.common.Size(80, 36);
            result.minimizedItemSize = new primitives.common.Size(3, 3);
            result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);

            var itemTemplate = jQuery(
              '<div class="bp-item bp-corner-all bt-item-frame">'
                + '<div name="title" class="bp-item" style="top: 3px; left: 6px; width: 68px; height: 28px; font-size: 12px;">'
                + '</div>'
            + '</div>'
            ).css({
                width: result.itemSize.width + "px",
                height: result.itemSize.height + "px"
            }).addClass("bp-item bp-corner-all bt-item-frame");
            result.itemTemplate = itemTemplate.wrap('<div>').parent().html();

            return result;
        }
    </script>
</head>
<body>
    <div id="basicdiagram" style="width: 640px; height: 800px; border-style: dotted; border-width: 1px;" />
</body>
</html>

赞(0）分享  回复(0）举报  2022-12-03
7jmck4yq

7jmck4yq3#

<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>The very first family chart</title>

    <link rel="stylesheet" href="jquery-ui-1.10.2.custom.css" />
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery-ui-1.10.2.custom.min.js"></script>

    <script  type="text/javascript" src="primitives.min.js"></script>
    <link href="primitives.latest.css" media="screen" rel="stylesheet" type="text/css" />

    <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function () {
            var options = new primitives.famdiagram.Config();

            var items = [
                { id: 4, parents: [1,2], title: "4", description: "Дочка",image: "images/photos/m.png" },
                { id: 3, parents: [1,2], title: "3", description: "Сынок",image: "images/photos/m.png" },
                { id: 2, title: "2", gender: "M", description: "Мари", image: "images/photos/f.png" },
                { id: 1, title: "1", label: "SeR", gender: "M", description: "Серж", image: "images/photos/m.png" }
            ];

        var annotations = [
            new primitives.famdiagram.HighlightPathAnnotationConfig({
            items: [1, 2,1],
            color: primitives.common.Colors.Red,
            lineWidth: 2,
            opacity: 1,
            showArrows: true
        })
        ];

        function Update() {
           control.update(primitives.orgdiagram.UpdateMode.Refresh);
            };

            //DemoVerticalLayout.html
            options.pageFitMode = primitives.common.PageFitMode.None;  //Page Fit Mode
            options.orientationType = primitives.common.OrientationType.Bottom;  //Orientation Type
            options.verticalAlignment = primitives.common.VerticalAlignmentType.Top;
        options.horizontalAlignment = primitives.common.HorizontalAlignmentType.Center;
        options.childrenPlacementType = primitives.common.ChildrenPlacementType.Horizontal;
        options.leavesPlacementType = primitives.common.ChildrenPlacementType.Horizontal;
            options.hideGrandParentsConnectors = "false";
            options.hasButtons = primitives.common.Enabled.Auto;
            options.groupTitleVerticalAlignment = primitives.common.VerticalAlignmentType.Middle;
            options.groupTitleHorizontalAlignment = primitives.common.HorizontalAlignmentType.Center;
            options.items = items;
            //options.annotations = annotations;
            options.cursorItem = 5;
            options.linesWidth = 1;
            options.linesColor = "black";
            options.hasSelectorCheckbox = primitives.common.Enabled.False;
            options.normalLevelShift = 20;
            options.dotLevelShift = 20;
            options.lineLevelShift = 20;
            options.normalItemsInterval = 20;
            options.dotItemsInterval = 10;
            options.lineItemsInterval = 10;
            options.arrowsDirection = primitives.common.GroupByType.Children;
            options.elbowType = primitives.common.ElbowType.Round;
            options.showExtraArrows = false;

            options.defaultTemplateName = "info";
            options.templates = [getInfoTemplate()];
            options.onItemRender = onTemplateRender;

            jQuery("#basicdiagram").famDiagram(options);
        });//]]>  

        function onTemplateRender(event, data) {
            switch (data.renderingMode) {
                case primitives.common.RenderingMode.Create:
                    /* Initialize widgets here */
                    break;
                case primitives.common.RenderingMode.Update:
                    /* Update widgets here */
                    break;
            }

            var itemConfig = data.context;

            if (data.templateName == "info") {
                data.element.find("[name=label]").text(itemConfig.label);
                data.element.find("[name=title]").text(itemConfig.title);
                data.element.find("[name=title]").attr("title", itemConfig.title);
                data.element.find("[name=description]").text(itemConfig.description);
            }
        }

        function getInfoTemplate() {
            var result = new primitives.orgdiagram.TemplateConfig();
            result.name = "info";

            result.itemSize = new primitives.common.Size(180, 80);
            //result.minimizedItemSize = new primitives.common.Size(3, 3);
            //result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);

            var itemTemplate = jQuery(
              '<div class="bp-item bp-corner-all bt-item-frame" style="height: 119px; top: 6px; left: 145.5px; position: absolute; padding: 0px; margin: 0px;">'
            + '    <div class="bp-item bp-corner-all bp-title-frame" style="top: 2px; left: 2px; height: 20px;">'
            + '        <div name="title" class="bp-item bp-title" style="top: 3px; left: 6px; height: 18px;">Manager E</div>'
            + '    </div>'
            //+ '    <div class="bp-item bp-photo-frame" style="top: 26px; left: 2px; width: 50px; height: 60px;">'
            //+ '        <img name="photo" style="height:60px; width:50px;" src="images/photos/m.png">'
            //+ '    </div>'
            + '    <div name="phone" class="bp-item" style="top: 26px; left: 56px; height: 18px; font-size: 12px;">1-900-800-70-15</div>'
            + '    <div class="bp-item" style="top: 44px; left: 56px; height: 18px; font-size: 12px;">'
            + '        <a name="email" href="mailto:mail1@mail.com?Subject=Hello%20world" target="_top">mail1@mail.com</a>'
            + '    </div>'
            + '    <div name="description" class="bp-item" style="top: 62px; left: 56px; height: 36px; font-size: 10px;">Managers E description </div>'
            + '</div>'
            ).css({
                //width: result.itemSize.width + "px",
                height: result.itemSize.height + "px"
            }).addClass("bp-item bp-corner-all bt-item-frame");
            result.itemTemplate = itemTemplate.wrap('<div>').parent().html();

            return result;
        }
    </script>
</head>
<body>
    <div id="basicdiagram" style="width: 640px; height: 600px; border-style: dotted; border-width: 1px;" />
</body>
</html>

结果：

赞(0）分享  回复(0）举报  2022-12-03
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com