1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<!--script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script-->
<script type="text/javascript" src="http://rniemeyer.github.io/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style>
.group{
background-color: #fff;
padding: 10px;
border-radius: 5px;
border: solid 1px #666;
}
.group-conditions{
margin-left: 20px;
}
.condition, .group{
margin-top: 10px;
margin-bottom: 1px;
}
.container {
max-width: 100%;
}
.textbox1 {
border: 1px solid #c4c4c4;
height: 25px;
font-size: 13px;
padding: 1px 1px 1px 1px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
color: black;
}
.textbox1:focus {
outline: none;
border: 1px solid #7bc1f7;
box-shadow: 0px 0px 8px #7bc1f7;
-moz-box-shadow: 0px 0px 8px #7bc1f7;
-webkit-box-shadow: 0px 0px 8px #7bc1f7;
}
.alert-warning1 {
color: #c09853;/* background-color: #fcf8e3; *//* border-color: #fbeed5; */
}
.alert1 {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-group1 {
margin-top: 10px;
margin-bottom: 2px;
border-color: rgb(220, 200, 150);
}
</style>
</head>
<body>
<!-- HTML контейнер в котором формируеться конструктор маркеров -->
<div class="container">
<!--div class="alert alert-info"> <span data-bind="text: text"></span> </div-->
<div data-bind="with: group">
<div data-bind="template: templateName"></div>
</div>
</div>
<!-- HTML шаблон для условий -->
<script id="condition-template" type="text/html">
<div class="condition">
<select class="textbox1" data-bind="options: entarea, optionsText : 'displayName', optionsValue: 'sqlAreaId'"></select>
<!--select class="textbox1" data-bind="options: fields, optionsText : 'fieldDisplayName', optionsValue: 'fieldId'/*, template: { name: 'condition-template', foreach: ko.utils.arrayFilter(fields(), function(p){ return p.sqlAreaId() == 1;}
)}*/"></select-->
<select class="textbox1" data-bind="options: fields, optionsText : 'fieldDisplayName', optionsValue: 'fieldId'"></select>
<select class="textbox1" data-bind="options: comparisons, optionsText : 'comparsionDisplayName', optionsValue: 'fieldType'"></select>
<input class="textbox1" type="text" data-bind="value: value"></input>
<button class="btn btn-danger btn-xs" data-bind="click: $parent.removeChild"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</script>
<!-- HTML шаблон для групп -->
<script id="group-template" type="text/html">
<div class="alert1 alert-warning1 alert-group1">
<select class="textbox1" data-bind="options: logoper, optionsText : 'logicalOperatorDisplayName', Value: 'logicalOperatorDisplayName'"></select>
<button class="btn btn-xs btn-success" data-bind="click: addCondition"><span class="glyphicon glyphicon-plus-sign"></span> Добавить условие</button>
<button class="btn btn-xs btn-success" data-bind="click: addGroup"><span class="glyphicon glyphicon-plus-sign"></span> Добавить группу</button>
<button class="btn btn-xs btn-danger" data-bind="click: $parent.removeChild"><span class="glyphicon glyphicon-minus-sign"></span> Удалить группу</button>
<div class="group-conditions">
<div data-bind="foreach: children">
<div data-bind="template: templateName"></div>
</div>
</div>
</div>
</script>
<script>
window.QueryBuilder = (function (exports, ko) {
function Condition() {
var self = this;
var sqlArea = function (sqlAreaId, displayName) {
this.displayName = displayName;
this.sqlAreaId = sqlAreaId;
};
var field = function (fieldId, fieldDisplayName, sqlAreaId, fieldType) {
this.fieldId = fieldId;
this.fieldDisplayName = fieldDisplayName;
this.sqlAreaId = sqlAreaId;
this.fieldType = fieldType;
};
var comparison = function ( comparsionId, comparsionDisplayName, fieldType) {
this.comparsionId = comparsionId;
this.comparsionDisplayName = comparsionDisplayName;
this.fieldType = fieldType;
};
self.templateName = "condition-template";
self.entarea = ko.observableArray([new sqlArea(1, "Клиенты"),
new sqlArea(2, "Заказы")]);
self.selectedArea = ko.observable();
self.fields = ko.observableArray([new field( 1, "Наименование клиента", 1, 1),
new field( 2, "Адрес клиента", 1, 1),
new field( 3, "Телефон клиента", 1, 1),
new field( 4, "Руководитель", 1, 1),
new field( 5, "Тип клиента", 1, 2),
new field( 6, "Номер заказа", 2, 2),
new field( 7, "Сумма заказа", 2, 2),
new field( 8, "Дата заказа", 2, 3)]);
self.selectedField = ko.observable(self.fields());
self.comparisons = ko.observableArray([new comparison( 1,"больше или равно", 2),
new comparison( 2,"больше чем", 2),
new comparison( 3,"до", 3),
new comparison( 4,"любая дата из", 3),
new comparison( 5,"любая строка из", 1),
new comparison( 6,"любое кроме", 2),
new comparison( 7,"любое число из", 2),
new comparison( 8,"меньше", 2),
new comparison( 9,"меньше или равно", 2),
new comparison(10,"начиная с", 3),
new comparison(11,"не равно", 2),
new comparison(12,"по", 3),
new comparison(13,"после", 3),
new comparison(14,"равно", 2),
new comparison(15,"содержит выражение", 1),
new comparison(16,"точное совпадение", 1)]);
self.selectedComparison = ko.observable(self.comparisons());
self.value = ko.observable(0);
self.text = ko.computed(function () {
return self.selectedField() +
" " +
self.selectedComparison() +
" " +
self.value();
});
}
exports.Condition = Condition;
return exports;
})(window.QueryBuilder || {}, window.ko);
window.QueryBuilder = (function (exports, ko) {
var Condition = exports.Condition;
function Group() {
var self = this;
var logicalOperator = function (logicalOperatorId, logicalOperatorDisplayName) {
this.logicalOperatorDisplayName = logicalOperatorDisplayName;
this.logicalOperatorId = logicalOperatorId;
};
self.templateName = "group-template";
self.children = ko.observableArray();
self.logoper = ko.observableArray([new logicalOperator(1, "И"), new logicalOperator(2, "ИЛИ")]);
self.logicalOperatorId = ko.observable(2);
self.children.push(new Condition());
self.addCondition = function () {
self.children.push(new Condition());
};
self.addGroup = function () {
self.children.push(new Group());
};
self.removeChild = function (child) {
self.children.remove(child);
};
self.text = ko.computed(function () {
var result = "(";
var op = "";
for (var i = 0; i < self.children()
.length; i++) {
var child = self.children()[i];
result += op + child.text();
op = " " + self.logoper.status + " ";
}
return result += ")";
});
}
exports.Group = Group;
return exports;
})(window.QueryBuilder || {}, window.ko);
window.QueryBuilder = (function (exports, ko) {
var Group = exports.Group;
var self = this;
function ViewModel() {
var self = this;
self.group = ko.observable(new Group());
// the text() function is just an example to show output
self.text = ko.computed(function () {
return self.group()
.text();
});
}
/* ViewModel.fields = ko.dependentObservable(function() {
var field = this.selectedArea(), sqlAreaId;
if (sqlAreaId) {
countryId = country.countryId();
return ko.utils.arrayFilter(this.states(), function(state) {
return state.countryId() === countryId;
});
}
return [];
}, ViewModel);*/
exports.ViewModel = ViewModel;
return exports;
})(window.QueryBuilder || {}, window.ko);
</script>
<script>
window.addEventListener("load", function ()
{
ko.applyBindings(new QueryBuilder.ViewModel());
}, true);</script>
</body>
</html>
