0

我想开发一个类似于JQuery QueryBuilder的searchfilter ，但是遇到这个错误，导致main.js：

filter.html:35 Uncaught SyntaxError: Unexpected identifier

到目前为止，我有：

过滤器.html

    <div class="filter" id="root">
        <div class="form-group">
            <select class="form-control" id="exampleFormControlSelect1">
                <option>Table1</option>
                <option>Table2</option>
                <option>Table3</option>
                <option>Table4</option>
            </select>
        </div>
    </div>
 ...
 <script src='main.js'></script><!-- filter.html:35 -->


用于树逻辑的main.js 类

class TreeNode {

}
class TreeGroup extends TreeNode {
    parent = null;
    children = [];
    condition = null;
    id = null;

    constructor() {
        super();
        this.id = Math.random().toString(36).substring(7);
    }
    addChild(node) {
        this.children.push(node);
    }
    setCondition(condition) {
        this.condition = condition;
    }
    removeChild(node) {
        const index = this.children.indexOf(node);
        if (index > -1) {
            this.children.splice(index, 1);
        }
    }
    setParent(parent) {
        this.parent = parent;
    }
}
class TreeRule extends TreeNode {
    parent = null;
    id = null;
    constructor() {
        super();
        this.id = Math.random().toString(36).substring(7);
    }
    setParent(parent) {
        this.parent = parent;
    }
}

动态插入html模板

let root = new TreeGroup();
root.id = "root";
createGroupTemplate(root);

function createGroupTemplate(parent) {
    let group = new TreeGroup();
    group.setParent(parent);
    parent.addChild(group);
    let s = ' <div class="group" id="' + group.id + '">' +

        '<div class="btn-group">' +
        '<button type="button" class="btn btn-primary">AND</button>' +
        '<button type="button" class="btn btn-primary">OR</button>' +
        '</div>' +
        '<div class="btn-group float-right">' +
        '<button type="button" class="btn btn-success" onclick="createGroupTemplate(' + group + ')">Add Group</button>' +
        '<button type="button" class="btn btn-success" onclick = "createRuleTemplate("' + group + '")">Add Rule</button>' +
        '</div>' +
        '</div>';
    $('#' + parent.id).append(s);
}
function createRuleTemplate(parent) {
    let rule = new TreeRule();
    rule.setParent(parent);
    return '<div class="row">' +
        '<div class="col-sm">' +
        '<select class="form-control">' +
        '<option>Price</option>' +
        '<option>Name</option>' +
        '<option>Category</option>' +
        '</select>' +
        '</div>' +
        '<div class="col-sm">' +
        '<select class="form-control" >' +
        '<option>equal</option>' +
        '<option>not equal</option>' +
        '<option>greater than</option>' +
        '<option>lesser than</option>' +
        '</select>' +
        '</div>' +
        '<div class="col-sm">' +
        ' <input type="text" class="form-control">' +
        '</div>' +
        '</div>';
}

我不确定这是否是遇到此任务的最有效方式。有没有更好的方法来创建这些 html 模板并将它们存储在树中，标识符还有什么问题？

4

0 回答 0