forked from fanruan/fineui
windy
6 years ago
23 changed files with 4655 additions and 183 deletions
@ -0,0 +1,54 @@
|
||||
/** |
||||
* 简单的复选下拉树控件, 适用于数据量少的情况, 可以自增值 |
||||
* |
||||
* Created by GUY on 2015/10/29. |
||||
* @class BI.TreeValueChooserInsertCombo |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.TreeValueChooserInsertCombo = BI.inherit(BI.AbstractTreeValueChooser, { |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.TreeValueChooserInsertCombo.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-tree-value-chooser-insert-combo", |
||||
width: 200, |
||||
height: 24, |
||||
items: null, |
||||
itemsCreator: BI.emptyFn |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.TreeValueChooserInsertCombo.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
if (BI.isNotNull(o.items)) { |
||||
this._initData(o.items); |
||||
} |
||||
this.combo = BI.createWidget({ |
||||
type: "bi.multi_tree_insert_combo", |
||||
element: this, |
||||
itemsCreator: BI.bind(this._itemsCreator, this), |
||||
valueFormatter: BI.bind(this._valueFormatter, this), |
||||
width: o.width, |
||||
height: o.height |
||||
}); |
||||
|
||||
this.combo.on(BI.MultiTreeCombo.EVENT_CONFIRM, function () { |
||||
self.fireEvent(BI.TreeValueChooserInsertCombo.EVENT_CONFIRM); |
||||
}); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.combo.setValue(v); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.combo.getValue(); |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
this._initData(items); |
||||
this.combo.populate.apply(this.combo, arguments); |
||||
} |
||||
}); |
||||
BI.TreeValueChooserInsertCombo.EVENT_CONFIRM = "TreeValueChooserInsertCombo.EVENT_CONFIRM"; |
||||
BI.shortcut("bi.tree_value_chooser_insert_combo", BI.TreeValueChooserInsertCombo); |
||||
@ -0,0 +1,286 @@
|
||||
/** |
||||
* 可以往当前选中节点下添加新值的下拉树 |
||||
* @class BI.MultiTreeInsertCombo |
||||
* @extends BI.Single |
||||
*/ |
||||
|
||||
BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { |
||||
|
||||
constants: { |
||||
offset: { |
||||
top: 0, |
||||
left: 0, |
||||
right: 0, |
||||
bottom: 25 |
||||
} |
||||
}, |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.MultiTreeInsertCombo.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-multi-tree-insert-combo", |
||||
itemsCreator: BI.emptyFn, |
||||
valueFormatter: BI.emptyFn, |
||||
height: 24 |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.MultiTreeInsertCombo.superclass._init.apply(this, arguments); |
||||
|
||||
var self = this, o = this.options; |
||||
|
||||
var isInit = false; |
||||
var want2showCounter = false; |
||||
|
||||
this.storeValue = {value: o.value || {}}; |
||||
|
||||
this.trigger = BI.createWidget({ |
||||
type: "bi.multi_select_trigger", |
||||
height: o.height, |
||||
valueFormatter: o.valueFormatter, |
||||
// adapter: this.popup,
|
||||
masker: { |
||||
offset: this.constants.offset |
||||
}, |
||||
searcher: { |
||||
type: "bi.multi_tree_searcher", |
||||
itemsCreator: o.itemsCreator, |
||||
popup: { |
||||
type: "bi.multi_tree_search_insert_pane", |
||||
listeners: [{ |
||||
eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, |
||||
action: function () { |
||||
self.storeValue.value[self.trigger.getSearcher().getKeyword()] = {}; |
||||
self._assertShowValue(); |
||||
// setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了
|
||||
self.combo.setValue(self.storeValue); |
||||
self.trigger.stopEditing(); |
||||
} |
||||
}] |
||||
} |
||||
}, |
||||
switcher: { |
||||
el: { |
||||
type: "bi.multi_tree_check_selected_button" |
||||
}, |
||||
popup: { |
||||
type: "bi.multi_tree_check_pane", |
||||
itemsCreator: o.itemsCreator |
||||
} |
||||
}, |
||||
value: {value: o.value || {}} |
||||
|
||||
}); |
||||
|
||||
this.combo = BI.createWidget({ |
||||
type: "bi.combo", |
||||
toggle: false, |
||||
container: o.container, |
||||
el: this.trigger, |
||||
adjustLength: 1, |
||||
popup: { |
||||
type: "bi.multi_tree_popup_view", |
||||
ref: function () { |
||||
self.popup = this; |
||||
self.trigger.setAdapter(this); |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.MultiTreePopup.EVENT_AFTERINIT, |
||||
action: function () { |
||||
self.trigger.getCounter().adjustView(); |
||||
isInit = true; |
||||
if (want2showCounter === true) { |
||||
showCounter(); |
||||
} |
||||
} |
||||
}, { |
||||
eventName: BI.MultiTreePopup.EVENT_CHANGE, |
||||
action: function () { |
||||
change = true; |
||||
var val = { |
||||
type: BI.Selection.Multi, |
||||
value: this.hasChecked() ? this.getValue() : {} |
||||
}; |
||||
self.trigger.getSearcher().setState(val); |
||||
self.trigger.getCounter().setButtonChecked(val); |
||||
} |
||||
}, { |
||||
eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, |
||||
action: function () { |
||||
self.combo.hideView(); |
||||
} |
||||
}, { |
||||
eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, |
||||
action: function () { |
||||
clear = true; |
||||
self.setValue(); |
||||
self._defaultState(); |
||||
} |
||||
}], |
||||
itemsCreator: o.itemsCreator, |
||||
onLoaded: function () { |
||||
BI.nextTick(function () { |
||||
self.trigger.getCounter().adjustView(); |
||||
self.trigger.getSearcher().adjustView(); |
||||
}); |
||||
} |
||||
}, |
||||
value: {value: o.value || {}}, |
||||
hideChecker: function (e) { |
||||
return triggerBtn.element.find(e.target).length === 0; |
||||
} |
||||
}); |
||||
|
||||
var change = false; |
||||
var clear = false; // 标识当前是否点击了清空
|
||||
|
||||
var isSearching = function () { |
||||
return self.trigger.getSearcher().isSearching(); |
||||
}; |
||||
|
||||
var isPopupView = function () { |
||||
return self.combo.isViewVisible(); |
||||
}; |
||||
|
||||
this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { |
||||
self.storeValue = {value: self.combo.getValue()}; |
||||
this.setValue(self.storeValue); |
||||
}); |
||||
this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { |
||||
self.storeValue = {value: this.getValue()}; |
||||
self.combo.setValue(self.storeValue); |
||||
BI.nextTick(function () { |
||||
if (isPopupView()) { |
||||
self.combo.populate(); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
function showCounter () { |
||||
if (isSearching()) { |
||||
self.storeValue = {value: self.trigger.getValue()}; |
||||
} else if (isPopupView()) { |
||||
self.storeValue = {value: self.combo.getValue()}; |
||||
} |
||||
self.trigger.setValue(self.storeValue); |
||||
} |
||||
|
||||
this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { |
||||
if (want2showCounter === false) { |
||||
want2showCounter = true; |
||||
} |
||||
if (isInit === true) { |
||||
want2showCounter = null; |
||||
showCounter(); |
||||
} |
||||
}); |
||||
this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { |
||||
self.combo.toggle(); |
||||
}); |
||||
this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { |
||||
if (!self.combo.isViewVisible()) { |
||||
self.combo.showView(); |
||||
} |
||||
}); |
||||
|
||||
this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { |
||||
var checked = this.getSearcher().hasChecked(); |
||||
var val = { |
||||
type: BI.Selection.Multi, |
||||
value: checked ? {1: 1} : {} |
||||
}; |
||||
this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); |
||||
this.getCounter().setButtonChecked(val); |
||||
}); |
||||
|
||||
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { |
||||
if (isSearching()) { |
||||
return; |
||||
} |
||||
if (change === true) { |
||||
self.storeValue = {value: self.combo.getValue()}; |
||||
change = false; |
||||
} |
||||
self.combo.setValue(self.storeValue); |
||||
self.populate(); |
||||
|
||||
}); |
||||
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { |
||||
if (isSearching()) { |
||||
self.trigger.stopEditing(); |
||||
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); |
||||
} else { |
||||
if (isPopupView()) { |
||||
self.trigger.stopEditing(); |
||||
self.storeValue = {value: self.combo.getValue()}; |
||||
if (clear === true) { |
||||
self.storeValue = {value: {}}; |
||||
} |
||||
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); |
||||
} |
||||
} |
||||
clear = false; |
||||
change = false; |
||||
}); |
||||
|
||||
var triggerBtn = BI.createWidget({ |
||||
type: "bi.trigger_icon_button", |
||||
width: o.height, |
||||
height: o.height, |
||||
cls: "multi-select-trigger-icon-button" |
||||
}); |
||||
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { |
||||
self.trigger.getCounter().hideView(); |
||||
if (self.combo.isViewVisible()) { |
||||
self.combo.hideView(); |
||||
} else { |
||||
self.combo.showView(); |
||||
} |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: this.combo, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}, { |
||||
el: triggerBtn, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
_assertShowValue: function () { |
||||
this.trigger.getSearcher().setState(this.storeValue); |
||||
this.trigger.getCounter().setButtonChecked(this.storeValue); |
||||
}, |
||||
|
||||
_defaultState: function () { |
||||
this.trigger.stopEditing(); |
||||
this.combo.hideView(); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.storeValue.value = v || {}; |
||||
this.combo.setValue({ |
||||
value: v || {} |
||||
}); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.storeValue.value; |
||||
}, |
||||
|
||||
populate: function () { |
||||
this.combo.populate.apply(this.combo, arguments); |
||||
} |
||||
}); |
||||
|
||||
BI.MultiTreeInsertCombo.EVENT_CONFIRM = "MultiTreeInsertCombo.EVENT_CONFIRM"; |
||||
|
||||
BI.shortcut("bi.multi_tree_insert_combo", BI.MultiTreeInsertCombo); |
||||
@ -0,0 +1,106 @@
|
||||
/** |
||||
* |
||||
* 在搜索框中输入文本弹出的面板 |
||||
* @class BI.MultiTreeSearchInsertPane |
||||
* @extends BI.Pane |
||||
*/ |
||||
|
||||
BI.MultiTreeSearchInsertPane = BI.inherit(BI.Widget, { |
||||
|
||||
constants: { |
||||
height: 24, |
||||
}, |
||||
|
||||
props: { |
||||
baseCls: "bi-multi-tree-search-insert-pane bi-card", |
||||
itemsCreator: BI.emptyFn, |
||||
keywordGetter: BI.emptyFn |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, opts = this.options; |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.text_button", |
||||
invisible: true, |
||||
ref: function (_ref) { |
||||
self.addTip = _ref; |
||||
}, |
||||
text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), |
||||
height: this.constants.height, |
||||
cls: "bi-high-light", |
||||
hgap: 5, |
||||
handler: function () { |
||||
self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, opts.keywordGetter()); |
||||
} |
||||
}, { |
||||
type: "bi.part_tree", |
||||
tipText: BI.i18nText("BI-No_Select"), |
||||
itemsCreator: function (op, callback) { |
||||
op.keyword = opts.keywordGetter(); |
||||
opts.itemsCreator(op, function (res) { |
||||
callback(res); |
||||
self.setKeyword(opts.keywordGetter(), res.items); |
||||
}); |
||||
}, |
||||
ref: function (_ref) { |
||||
self.partTree = _ref; |
||||
}, |
||||
value: opts.value, |
||||
listeners: [{ |
||||
eventName: BI.Controller.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||
} |
||||
}, { |
||||
eventName: BI.TreeView.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CHANGE); |
||||
} |
||||
}] |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
setKeyword: function (keyword, nodes) { |
||||
var isAddTipVisible = BI.isEmptyArray(nodes); |
||||
this.addTip.setVisible(isAddTipVisible); |
||||
this.partTree.setVisible(!isAddTipVisible); |
||||
isAddTipVisible && this.addTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); |
||||
}, |
||||
|
||||
hasChecked: function () { |
||||
return this.partTree.hasChecked(); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.setSelectedValue(v.value); |
||||
}, |
||||
|
||||
setSelectedValue: function (v) { |
||||
v || (v = {}); |
||||
this.partTree.setSelectedValue(v); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.partTree.getValue(); |
||||
}, |
||||
|
||||
empty: function () { |
||||
this.partTree.empty(); |
||||
}, |
||||
|
||||
populate: function (op) { |
||||
this.partTree.stroke.apply(this.partTree, arguments); |
||||
} |
||||
}); |
||||
|
||||
BI.MultiTreeSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
|
||||
BI.MultiTreeSearchInsertPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; |
||||
BI.MultiTreeSearchInsertPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; |
||||
BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; |
||||
|
||||
BI.shortcut("bi.multi_tree_search_insert_pane", BI.MultiTreeSearchInsertPane); |
||||
Loading…
Reference in new issue