bsFormBuilder
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bsFormBuilde 演示</title>

    <script src="build/jquery/jquery.min.js"></script>
    <script src="build/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="build/sortable/sortable.min.js"></script>
    <script src="build/fasty/fasty.min.js"></script>

    <link href="build/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="build/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">

    <!--    <script src="/dist/bs-form-builder.all.min.js"></script>-->

    <script src="src/bs-form-builder-components.js"></script>
    <script src="src/bs-form-builder.js"></script>
    <link href="src/bs-form-builder.css" rel="stylesheet">

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?9e124357e485b4730b5a46283c52ccf1";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


</head>

<body>
<div class="container-fluid">
    <div class="bs-form-builder-header">表单设计</div>
    <div id="builder"></div>
</div>

<script>
    // var datas = [{"id":"62cbdbad88","tag":"grid","label":"栅格布局","name":"grid_1","grid":2,"index":1,"children":{"0":[{"id":"7c164d0e18","tag":"input","label":"输入框","name":"input_3","parentDataId":"8296f944ef","parentDataIndex":"0","index":0}],"1":[{"id":"8d595619a8","tag":"grid","label":"栅格布局","name":"grid_4","grid":2,"parentDataId":"8296f944ef","parentDataIndex":"1","index":0,"children":{"0":[{"id":"11d9e667d9","tag":"input","label":"输入框","name":"input_5","parentDataId":"c469c1bf28","parentDataIndex":"0","index":0},{"id":"44cb995b02","tag":"input","label":"输入框","name":"input_5","parentDataId":"c469c1bf28","parentDataIndex":"0","index":1}],"1":[{"id":"3f6772809c","tag":"textarea","label":"多行输入框","name":"textarea_6","rows":5,"parentDataId":"c469c1bf28","parentDataIndex":"1","index":0}]}}]}},{"id":"657634a8df","tag":"textarea","label":"多行输入框","name":"textarea_2","rows":5,"index":0}]
    // $('#builder').bsFormBuilder({datas});

    // var datas = [{"id":"62cbdbad88","tag":"grid","label":"栅格布局","name":"grid_1","grid":2,"index":1,"children":{"0":[{"id":"7c164d0e18","tag":"input","label":"输入框","name":"input_3","parentDataId":"8296f944ef","parentDataIndex":"0","index":0}],"1":[{"id":"8d595619a8","tag":"grid","label":"栅格布局","name":"grid_4","grid":2,"parentDataId":"8296f944ef","parentDataIndex":"1","index":0,"children":{"0":[{"id":"11d9e667d9","tag":"input","label":"输入框","name":"input_5","parentDataId":"c469c1bf28","parentDataIndex":"0","index":0},{"id":"44cb995b02","tag":"input","label":"输入框","name":"input_5","parentDataId":"c469c1bf28","parentDataIndex":"0","index":1}],"1":[{"id":"3f6772809c","tag":"textarea","label":"多行输入框","name":"textarea_6","rows":5,"parentDataId":"c469c1bf28","parentDataIndex":"1","index":0}]}}]}},{"id":"657634a8df","tag":"textarea","label":"多行输入框","name":"textarea_2","rows":5,"index":0}]
    // $('#builder').bsFormBuilder({
    //     mode:"view",
    //     datas
    // });


    // var datas = [{"id":"657634a8df","tag":"block","label":"多行输入框","name":"textarea_2","rows":5,"index":0}];
    //
    // $('#builder').bsFormBuilder({
    //     bsFormContainerSortableGroup:'main',
    //     components:[
    //         //自定义组件 block
    //         {
    //             "name": "板块",
    //             "tag": "block",
    //             "drag": {
    //                 "title": "板块",
    //                 "type": "container",
    //                 "index": 100,
    //                 "icon": "bi bi-grid-1x2"
    //             },
    //             propsfilter: ["tag", "id"],
    //             "template": '<div class="m-3 pt-2 bsFormItem bsFormFilter">' +
    //                         '  <div class="card collapsed-card">' +
    //                         '    <div class="card-header">' +
    //                         '      <h3 class="card-title">主编栏2</h3>' +
    //                         '      <div class="card-tools">' +
    //                         '        <button type="button" class="btn btn-tool" data-card-widget="collapse">' +
    //                         '          <i class="fas fa-plus"></i>' +
    //                         '        </button>' +
    //                         '      </div>' +
    //                         '    </div>' +
    //                         '    <div class="card-body bsItemContainer">{{$children[0]}}</div>' +
    //                         '  </div>' +
    //                         '</div>',
    //         },
    //     ],
    //     datas:datas
    // });


    var options = {
        optionsDatasources: [
            {
                text: "数据源1", value: "ds1", options: [
                    {text: "value1", value: "value1"},
                    {text: "value2", value: "value2"},
                    {text: "value3", value: "value3"}
                ]
            },
            {
                text: "数据源2", value: 'ds2', options: [
                    {text: "AAA", value: "aaa"},
                    {text: "BBB", value: "bbb"},
                    {text: "CCC", value: "ccc"}
                ]
            }
        ],
        bsFormPropsItemAppended: function (prop, data, b) {
            // console.log("bsFormPropsItemAppended --> prop:", prop)
            // console.log("bsFormPropsItemAppended --> data:", data)
        }
    }

    $('#builder').bsFormBuilder(options);

    // $('#builder').bsFormBuilder();
</script>
</body>

</html>