Question

我正在尝试使用jQuery-QueryBuilder来构建DNF形式的规则（连接子句的分离）。这些规则只有一个级别 - 并且强制 AND 加入任何内部查询组，并且这些组中的所有规则都已加入通过 OR 。现在，jQuery-QueryBuilder是表达我需要的东西的方式 - 我试图强制它只允许构建DNF格式的查询。

这需要三件事：

查询只能有一个组
最外面的查询由OR
最内层查询由AND

我可以在构造查询时使用allow_groups: 1强制执行规则只有一个级别（这非常有用！）。但是，我无法找到一种方法来使组间水平的条件不同。

我可以使用conditions选项（docs）设置可用条件 - 但这可以普遍使用。我希望能够设置像

outer_conditions = ['OR']
inner_conditions = ['AND']

我也尝试用CSS隐藏按钮（绝对不是我的专长）。这和我到目前为止一样接近：

// Hide main "AND" conditional value
.rules-group-container .rules-group-header .btn-group.group-conditions {
  display: none;
}

// Hide groups "OR" conditional value
.rules-group-container .rules-group-body .rules-list .btn-group.group-conditions > .btn:last-child {
  display: none;
}

仅在隐藏内部条件选项时有效，但在尝试隐藏两者时不起作用。

这是一个我一直在玩的JS小提琴，它将组限制为1，隐藏内部OR选项，但不隐藏外部选项。

https://jsfiddle.net/qzq1mm5z/3/

感谢任何帮助！

Answer 1

引导我所有内心的CSS-foo并想出这个。使用通配符选择器和:not使其工作。

这个css排除了我想要的按钮并很好地将它们四舍五入以隐藏一个组中的某些按钮消失的事实。

// Hide the main group "AND" button
#builder-basic_group_0 > .rules-group-header .btn-primary:nth-child(1) {
  display: None;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

// Fix the radius of the remaining "OR" button sharp edge
#builder-basic_group_0 > .rules-group-header .btn-primary:nth-child(2) {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

// Hide all child groups "OR" button
[id^="builder-basic_group_"]:not(#builder-basic_group_0) > .rules-group-header .btn-primary:nth-child(2) {
  display: None;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

// Fix the radius of all remaining "OR" button sharp edges
[id^="builder-basic_group_"]:not(#builder-basic_group_0) > .rules-group-header .btn-primary:nth-child(1) {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

修正了JS小提琴：https://jsfiddle.net/qzq1mm5z/4/

限制jQuery-QueryBuilder仅在DNF中构建

1 个答案: