define("bui/calendar",["bui/common","bui/calendar/calendar","bui/calendar/monthpicker","bui/calendar/datepicker"],function(require){var e=require("bui/common"),t=e.namespace("Calendar");return e.mix(t,{Calendar:require("bui/calendar/calendar"),MonthPicker:require("bui/calendar/monthpicker"),DatePicker:require("bui/calendar/datepicker")}),t}),define("bui/calendar/monthpicker",["bui/common","bui/overlay","bui/list","bui/toolbar"],function(require){function e(){return $.map(u,function(e,t){return{text:e,value:t}})}var t=require("bui/common"),n=(t.Component,require("bui/overlay").Overlay),a=require("bui/list").SimpleList,i=require("bui/toolbar"),r=t.prefix,l="x-monthpicker-month",s="x-monthpicker-year",c="x-monthpicker-yearnav",o="x-monthpicker-item",u=["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],d=a.extend({bindUI:function(){var e=this;e.get("el").delegate("a","click",function(e){e.preventDefault()}).delegate("."+l,"dblclick",function(){e.fire("monthdblclick")})}},{ATTRS:{itemTpl:{view:!0,value:'<li class="'+o+' x-monthpicker-month"><a href="#" hidefocus="on">{text}</a></li>'},itemCls:{value:o},items:{view:!0,value:e()},elCls:{view:!0,value:"x-monthpicker-months"}}},{xclass:"calendar-month-panel"}),h=a.extend({bindUI:function(){var e=this,t=e.get("el");t.delegate("a","click",function(e){e.preventDefault()}),t.delegate("."+s,"dblclick",function(){e.fire("yeardblclick")}),t.delegate(".x-icon","click",function(t){var n=$(t.currentTarget);n.hasClass(c+"-prev")?e._prevPage():n.hasClass(c+"-next")&&e._nextPage()}),e.on("itemselected",function(t){t.item&&e.setInternal("year",t.item.value)})},_prevPage:function(){var e=this,t=e.get("start"),n=e.get("yearCount");e.set("start",t-n)},_nextPage:function(){var e=this,t=e.get("start"),n=e.get("yearCount");e.set("start",t+n)},_uiSetStart:function(){var e=this;e._setYearsContent()},_uiSetYear:function(e){var t=this,n=t.findItemByField("value",e);n?t.setSelectedByField(e):t.set("start",e)},_setYearsContent:function(){for(var e=this,t=e.get("year"),n=e.get("start"),a=e.get("yearCount"),i=[],r=n;n+a>r;r++){var l=r.toString();i.push({text:l,value:r})}e.set("items",i),e.setSelectedByField(t)}},{ATTRS:{items:{view:!0,value:[]},elCls:{view:!0,value:"x-monthpicker-years"},itemCls:{value:o},year:{},start:{value:(new Date).getFullYear()},yearCount:{value:10},itemTpl:{view:!0,value:'<li class="'+o+" "+s+'"><a href="#" hidefocus="on">{text}</a></li>'},tpl:{view:!0,value:'<div class="'+c+'"><span class="'+c+'-prev x-icon x-icon-normal x-icon-small"><span class="icon icon-caret icon-caret-left"></span></span><span class="'+c+'-next x-icon x-icon-normal x-icon-small"><span class="icon icon-caret icon-caret-right"></span></span></div><ul></ul>'}}},{xclass:"calendar-year-panel"}),g=n.extend({initializer:function(){var e=this,t=e.get("children"),n=new d,a=new h,i=e._createFooter();t.push(n),t.push(a),t.push(i),e.set("yearPanel",a),e.set("monthPanel",n)},bindUI:function(){var e=this;e.get("monthPanel").on("itemselected",function(t){t.item&&e.setInternal("month",t.item.value)}).on("monthdblclick",function(){e._successCall()}),e.get("yearPanel").on("itemselected",function(t){t.item&&e.setInternal("year",t.item.value)}).on("yeardblclick",function(){e._successCall()})},_successCall:function(){var e=this,t=e.get("success");t&&t.call(e)},_createFooter:function(){var e=this;return new i.Bar({elCls:r+"clear x-monthpicker-footer",children:[{xclass:"bar-item-button",text:"\u786e\u5b9a",btnCls:"button button-small button-primary",handler:function(){e._successCall()}},{xclass:"bar-item-button",text:"\u53d6\u6d88",btnCls:"button button-small last",handler:function(){var t=e.get("cancel");t&&t.call(e)}}]})},_uiSetYear:function(e){this.get("yearPanel").set("year",e)},_uiSetMonth:function(e){this.get("monthPanel").setSelectedByField(e)}},{ATTRS:{footer:{},align:{value:{}},year:{},success:{value:function(){}},cancel:{value:function(){}},width:{value:180},month:{},yearPanel:{},monthPanel:{}}},{xclass:"monthpicker"});return g}),define("bui/calendar/header",["bui/common"],function(require){var e=require("bui/common"),t=e.prefix,n=e.Component,a="year-text",i="month-text",r="x-datepicker-arrow",l="x-datepicker-prev",s="x-datepicker-next",c=n.Controller.extend({bindUI:function(){var e=this,t=e.get("el");t.delegate("."+r,"click",function(t){t.preventDefault();var n=$(t.currentTarget);n.hasClass(s)?e.nextMonth():n.hasClass(l)&&e.prevMonth()}),t.delegate(".x-datepicker-month","click",function(){e.fire("headerclick")})},setMonth:function(e,t){var n=this,a=n.get("year"),i=n.get("month");(e!==a||t!==i)&&(n.set("year",e),n.set("month",t),n.fire("monthchange",{year:e,month:t}))},nextMonth:function(){var e=this,t=new Date(e.get("year"),e.get("month")+1);e.setMonth(t.getFullYear(),t.getMonth())},prevMonth:function(){var e=this,t=new Date(e.get("year"),e.get("month")-1);e.setMonth(t.getFullYear(),t.getMonth())},_uiSetYear:function(e){var t=this;t.get("el").find("."+a).text(e)},_uiSetMonth:function(e){var t=this;t.get("el").find("."+i).text(e+1)}},{ATTRS:{year:{sync:!1},month:{sync:!1,setter:function(e){this.set("monthText",e+1)}},monthText:{},tpl:{view:!0,value:'<div class="'+r+" "+l+'"><span class="icon icon-white icon-caret icon-caret-left"></span></div><div class="x-datepicker-month"><div class="month-text-container"><span><span class="year-text">{year}</span>\u5e74 <span class="month-text">{monthText}</span>\u6708</span><span class="'+t+"caret "+t+'caret-down"></span></div></div><div class="'+r+" "+s+'"><span class="icon icon-white icon-caret icon-caret-right"></span></div>'},elCls:{view:!0,value:"x-datepicker-header"},events:{value:{monthchange:!0}}}},{xclass:"calendar-header"});return c}),define("bui/calendar/panel",["bui/common"],function(require){var e=require("bui/common"),t=e.Component,n=e.Date,a="x-datepicker-date",i="x-datepicker-today",r="x-datepicker-disabled",l="isoDate",s="x-datepicker-selected",c=6,o={deactive:"prevday",active:"active",disabled:"disabled"},u=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],d=t.View.extend({renderUI:function(){this.updatePanel()},updatePanel:function(){var e=this,t=e.get("el"),n=t.find("tbody"),a=e._getPanelInnerTpl();n.empty(),$(a).appendTo(n)},_getPanelInnerTpl:function(){for(var e=this,t=e._getFirstDate(),a=[],i=0;c>i;i++){var r=n.addWeek(i,t);a.push(e._getWeekTpl(r))}return a.join("")},_getWeekTpl:function(t){for(var a=this,i=a.get("weekTpl"),r=[],l=0;l<u.length;l++){var s=n.addDay(l,t);r.push(a._getDayTpl(s))}return e.substitute(i,{daysTpl:r.join("")})},_getDayTpl:function(t){var a=this,r=a.get("dayTpl"),s=t.getDay(),c=a._isToday(t)?i:"",d=u[s],h=t.getDate(),g=a._isInRange(t)?a._isCurrentMonth(t)?o.active:o.deactive:o.disabled;return e.substitute(r,{dayOfWeek:d,dateType:g,dateNumber:h,todayCls:c,date:n.format(t,l)})},_getFirstDate:function(e,t){var a=this,i=a._getMonthFirstDate(e,t),r=i.getDay();return n.addDay(-1*r,i)},_getMonthFirstDate:function(e,t){var n=this,e=e||n.get("year"),t=t||n.get("month");return new Date(e,t)},_isCurrentMonth:function(e){return e.getMonth()===this.get("month")},_isToday:function(e){var t=new Date;return t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()},_isInRange:function(e){var t=this,n=t.get("maxDate"),a=t.get("minDate");return a&&a>e?!1:n&&e>n?!1:!0},_clearSelectedDate:function(){var e=this;e.get("el").find("."+s).removeClass(s)},_findDateElement:function(e){var t=this,i=n.format(e,l),r=t.get("el").find("."+a),s=null;return i&&r.each(function(e,t){return $(t).attr("title")===i?(s=$(t),!1):void 0}),s},_setSelectedDate:function(e){var t=this,n=t._findDateElement(e);t._clearSelectedDate(),n&&n.addClass(s)}},{ATTRS:{}}),h=t.Controller.extend({initializer:function(){var e=this,t=new Date;e.get("year")||e.set("year",t.getFullYear()),e.get("month")||e.set("month",t.getMonth())},bindUI:function(){var e=this,t=e.get("el");t.delegate("."+a,"click",function(e){e.preventDefault()}),t.delegate("."+r,"mouseup",function(e){e.stopPropagation()})},performActionInternal:function(e){var t=this,i=$(e.target).closest("."+a);if(i){var r=i.attr("title");r&&(r=n.parse(r),t.get("view")._isInRange(r)&&t.set("selected",r))}},setMonth:function(e,t){var n=this,a=n.get("year"),i=n.get("month");(e!==a||t!==i)&&(n.set("year",e),n.set("month",t),n.get("view").updatePanel())},_uiSetSelected:function(e,t){var a=this;t&&t.prevVal&&n.isDateEquals(e,t.prevVal)||(a.setMonth(e.getFullYear(),e.getMonth()),a.get("view")._setSelectedDate(e),a.fire("selectedchange",{date:e}))},_uiSetMaxDate:function(e){e&&this.get("view").updatePanel()},_uiSetMinDate:function(e){e&&this.get("view").updatePanel()}},{ATTRS:{year:{view:!0},month:{view:!0},selected:{},focusable:{value:!0},dayTpl:{view:!0,value:'<td class="x-datepicker-date x-datepicker-{dateType} {todayCls} day-{dayOfWeek}" title="{date}"><a href="#" hidefocus="on" tabindex="1"><em><span>{dateNumber}</span></em></a></td>'},events:{value:{click:!1,selectedchange:!0}},maxDate:{view:!0,setter:function(t){return t?e.isString(t)?n.parse(t):t:void 0}},minDate:{view:!0,setter:function(t){return t?e.isString(t)?n.parse(t):t:void 0}},weekTpl:{view:!0,value:"<tr>{daysTpl}</tr>"},tpl:{view:!0,value:'<table class="x-datepicker-inner" cellspacing="0"><thead><tr><th title="Sunday"><span>\u65e5</span></th><th title="Monday"><span>\u4e00</span></th><th title="Tuesday"><span>\u4e8c</span></th><th title="Wednesday"><span>\u4e09</span></th><th title="Thursday"><span>\u56db</span></th><th title="Friday"><span>\u4e94</span></th><th title="Saturday"><span>\u516d</span></th></tr></thead><tbody class="x-datepicker-body"></tbody></table>'},xview:{value:d}}},{xclass:"calendar-panel",priority:0});return h}),define("bui/calendar/calendar",["bui/picker","bui/calendar/monthpicker","bui/calendar/header","bui/calendar/panel","bui/toolbar"],function(require){function e(){var e=new Date;return new Date(e.getFullYear(),e.getMonth(),e.getDate())}function t(e){return 10>e?"0"+e:e.toString()}function n(e){for(var n=[],a=0;e>a;a++)n.push({text:t(a),value:t(a)});return n}function a(e,n,a){var r=e.get("el").find("."+n);i.isNumber(a)&&(a=t(a)),r.val(a)}var i=require("bui/common"),r=i.prefix,l="x-datepicker-time",s="x-datepicker-hour",c="x-datepicker-minute",o="x-datepicker-second",u="x-timepicker",d=require("bui/picker").ListPicker,h=require("bui/calendar/monthpicker"),g=require("bui/calendar/header"),p=require("bui/calendar/panel"),m=require("bui/toolbar"),v=i.Component,f=i.Date,y=v.Controller.extend({initializer:function(){var e=this,t=e.get("children"),n=new g,a=new p,i=e.get("footer")||e._createFooter();t.push(n),t.push(a),t.push(i),e.set("header",n),e.set("panel",a),e.set("footer",i)},renderUI:function(){var e=this,t=e.get("children");if(e.get("showTime")){var n=e.get("timepicker")||e._initTimePicker();t.push(n),e.set("timepicker",n)}},bindUI:function(){var e=this,t=e.get("header"),n=e.get("panel");n.on("selectedchange",function(t){var n=t.date;f.isDateEquals(n,e.get("selectedDate"))||e.set("selectedDate",n)}),e.get("showTime")?e._initTimePickerEvent():n.on("click",function(){e.fire("accept")}),t.on("monthchange",function(t){e._setYearMonth(t.year,t.month)}),t.on("headerclick",function(){var n=e.get("monthpicker")||e._createMonthPicker();n.set("year",t.get("year")),n.set("month",t.get("month")),n.show()})},_initTimePicker:function(){var e=this,t=e.get("lockTime"),n={hour:s,minute:c,second:o};if(t)for(var a in t){var i=n[a.toLowerCase()];e.set(a,t[a]),t.editable||e.get("el").find("."+i).attr("disabled","")}var r=new d({elCls:u,children:[{itemTpl:'<li><a href="#">{text}</a></li>'}],autoAlign:!1,align:{node:e.get("el"),points:["bl","bl"],offset:[0,-30]},trigger:e.get("el").find("."+l)});return r.render(),e._initTimePickerEvent(r),r},_initTimePickerEvent:function(e){var t=this,e=t.get("timepicker");e&&(e.get("el").delegate("a","click",function(e){e.preventDefault()}),e.on("triggerchange",function(t){var a=t.curTrigger;a.hasClass(s)?e.get("list").set("items",n(24)):e.get("list").set("items",n(60))}),e.on("selectedchange",function(e){var n=e.curTrigger,a=e.value;n.hasClass(s)?t.setInternal("hour",a):n.hasClass(c)?t.setInternal("minute",a):t.setInternal("second",a)}))},_setYearMonth:function(e,t){var n=this,a=n.get("selectedDate"),i=a.getDate();if(e!==a.getFullYear()||t!==a.getMonth()){var r=new Date(e,t,i);r.getMonth()!=t&&(r=f.addDay(-1,new Date(e,t+1))),n.set("selectedDate",r)}},_createMonthPicker:function(){var e,t=this;return e=new h({render:t.get("el"),effect:{effect:"slide",duration:300},visibleMode:"display",success:function(){var e=this;t._setYearMonth(e.get("year"),e.get("month")),e.hide()},cancel:function(){this.hide()}}),t.set("monthpicker",e),t.get("children").push(e),e},_createFooter:function(){var t=this,n=this.get("showTime"),a=[];return n?(a.push({content:t.get("timeTpl")}),a.push({xclass:"bar-item-button",text:"\u786e\u5b9a",btnCls:"button button-small button-primary",listeners:{click:function(){t.fire("accept")}}})):(a.push({xclass:"bar-item-button",text:"\u4eca\u5929",btnCls:"button button-small",id:"todayBtn",listeners:{click:function(){var n=e();t.set("selectedDate",n),t.fire("accept")}}}),a.push({xclass:"bar-item-button",text:"\u6e05\u9664",btnCls:"button button-small",id:"clsBtn",listeners:{click:function(){t.fire("clear")}}})),new m.Bar({elCls:r+"calendar-footer",children:a})},_updateTodayBtnAble:function(){var t=this;if(!t.get("showTime")){var n=t.get("footer"),a=t.get("panel").get("view"),i=e(),r=n.getItem("todayBtn");a._isInRange(i)?r.enable():r.disable()}},_uiSetSelectedDate:function(e){var t=this,n=e.getFullYear(),a=e.getMonth();t.get("header").setMonth(n,a),t.get("panel").set("selected",e),t.fire("datechange",{date:e})},_uiSetHour:function(e){a(this,s,e)},_uiSetMinute:function(e){a(this,c,e)},_uiSetSecond:function(e){a(this,o,e)},_uiSetMaxDate:function(e){var t=this;t.get("panel").set("maxDate",e),t._updateTodayBtnAble()},_uiSetMinDate:function(e){var t=this;t.get("panel").set("minDate",e),t._updateTodayBtnAble()}},{ATTRS:{header:{},panel:{},maxDate:{},minDate:{},monthPicker:{},timepicker:{},width:{value:180},events:{value:{click:!1,accept:!1,datechange:!1,monthchange:!1}},showTime:{value:!1},lockTime:{},timeTpl:{value:'<input type="text" readonly class="'+l+" "+s+'" />:<input type="text" readonly class="'+l+" "+c+'" />:<input type="text" readonly class="'+l+" "+o+'" />'},selectedDate:{value:e()},hour:{value:(new Date).getHours()},minute:{value:(new Date).getMinutes()},second:{value:0}}},{xclass:"calendar",priority:0});return y}),define("bui/calendar/datepicker",["bui/common","bui/picker","bui/calendar/calendar"],function(require){var e=require("bui/common"),t=require("bui/picker").Picker,n=require("bui/calendar/calendar"),a=e.Date,i=t.extend({initializer:function(){},createControl:function(){var e=this,t=e.get("children"),a=new n({render:e.get("el"),showTime:e.get("showTime"),lockTime:e.get("lockTime"),minDate:e.get("minDate"),maxDate:e.get("maxDate"),autoRender:!0});return a.on("clear",function(){var t=e.get("curTrigger"),n=t.val();n&&(t.val(""),t.trigger("change"))}),e.get("dateMask")||(e.get("showTime")?e.set("dateMask","yyyy-mm-dd HH:MM:ss"):e.set("dateMask","yyyy-mm-dd")),t.push(a),e.set("calendar",a),a},setSelectedValue:function(e){if(this.get("calendar")){var t=this,n=this.get("calendar"),i=a.parse(e,t.get("dateMask"));if(i=i||t.get("selectedDate"),n.set("selectedDate",a.getDate(i)),t.get("showTime")){var r=this.get("lockTime"),l=i.getHours(),s=i.getMinutes(),c=i.getSeconds();r&&(e&&r.editable||(l=null!=r.hour?r.hour:l,s=null!=r.minute?r.minute:s,c=null!=r.second?r.second:c)),n.set("hour",l),n.set("minute",s),n.set("second",c)}}},getSelectedValue:function(){if(!this.get("calendar"))return null;var e=this,t=e.get("calendar"),n=a.getDate(t.get("selectedDate"));return e.get("showTime")&&(n=a.addHour(t.get("hour"),n),n=a.addMinute(t.get("minute"),n),n=a.addSecond(t.get("second"),n)),n},getSelectedText:function(){return this.get("calendar")?a.format(this.getSelectedValue(),this._getFormatType()):""},_getFormatType:function(){return this.get("dateMask")},_uiSetMaxDate:function(e){if(!this.get("calendar"))return null;var t=this;t.get("calendar").set("maxDate",e)},_uiSetMinDate:function(e){if(!this.get("calendar"))return null;var t=this;t.get("calendar").set("minDate",e)}},{ATTRS:{showTime:{value:!1},lockTime:{},maxDate:{},minDate:{},dateMask:{},changeEvent:{value:"accept"},hideEvent:{value:"accept clear"},calendar:{},selectedDate:{value:new Date((new Date).setSeconds(0))}}},{xclass:"datepicker",priority:0});return i});
_initTagList: function() {
var _self = this,
tagInput = _self.getTagInput(),
tagList = new List.SimpleList({
elBefore: tagInput,
itemTpl: _self.get('tagItemTpl'),
idField: 'value'
});
tagList.render();
_self._initTagEvent(tagList);
_self.set('tagList', tagList);
return tagList;
},
define('bui/grid/grid',['bui/common','bui/mask','bui/toolbar','bui/list','bui/grid/header','bui/grid/column'],function (require) {
var BUI = require('bui/common'),
Mask = require('bui/mask'),
UA = BUI.UA,
Component = BUI.Component,
toolbar = require('bui/toolbar'),
List = require('bui/list'),
Header = require('bui/grid/header'),
Column = require('bui/grid/column');
function isPercent(str){
if(BUI.isString(str)){
return str.indexOf('%') !== -1;
}
return false;
}
var PREFIX = BUI.prefix,
CLS_GRID_HEADER_CONTAINER = PREFIX + 'grid-header-container',
CLS_GRID_BODY = PREFIX + 'grid-body',
CLS_GRID_WITH = PREFIX + 'grid-width',
CLS_GRID_HEIGHT = PREFIX + 'grid-height',
CLS_GRID_BORDER = PREFIX + 'grid-border',
CLS_GRID_TBAR = PREFIX + 'grid-tbar',
CLS_GRID_BBAR = PREFIX + 'grid-bbar',
CLS_BUTTON_BAR= PREFIX + 'grid-button-bar',
CLS_GRID_STRIPE = PREFIX + 'grid-strip',
CLS_GRID_ROW = PREFIX + 'grid-row',
CLS_ROW_ODD = PREFIX + 'grid-row-odd',
CLS_ROW_EVEN = PREFIX + 'grid-row-even',
CLS_ROW_FIRST = PREFIX + 'grid-row-first',
CLS_GRID_CELL = PREFIX + 'grid-cell',
CLS_GRID_CELL_INNER = PREFIX + 'grid-cell-inner',
CLS_TD_PREFIX = 'grid-td-',
CLS_CELL_TEXT = PREFIX + 'grid-cell-text',
CLS_CELL_EMPTY = PREFIX + 'grid-cell-empty',
CLS_SCROLL_WITH = '17',
CLS_HIDE = PREFIX + 'hidden',
ATTR_COLUMN_FIELD = 'data-column-field',
WIDTH_BORDER = 2,
HEIGHT_BAR_PADDING = 1;
function getInnerWidth(width){
var _self = this;
if(BUI.isNumber(width)){
width -= WIDTH_BORDER;
}
return width;
}
/**
* @class BUI.Grid.GridView
* @private
* @extends BUI.List.SimpleListView
* 表格的视图层
*/
var gridView = List.SimpleListView.extend({
//设置 body和table的标签
renderUI : function(){
var _self = this,
el = _self.get('el'),
bodyEl = el.find('.' + CLS_GRID_BODY);
_self.set('bodyEl',bodyEl);
_self._setTableTpl();
},
/**
* 获取行模板
* @ignore
*/
getItemTpl : function (record,index) {
var _self = this,
columns = _self._getColumns(),
tbodyEl = _self.get('tbodyEl'),
rowTpl = _self.get('rowTpl'),
oddCls = index % 2 === 0 ? CLS_ROW_ODD : CLS_ROW_EVEN,
cellsTpl = [],
rowEl;
BUI.each(columns, function (column) {
var dataIndex = column.get('dataIndex');
cellsTpl.push(_self._getCellTpl(column, dataIndex, record,index));
});
if(_self.get('useEmptyCell') /*&& !_self.get('forceFit')*/){
cellsTpl.push(_self._getEmptyCellTpl());
}
rowTpl = BUI.substitute(rowTpl,{cellsTpl:cellsTpl.join(''), oddCls:oddCls});
return rowTpl;
},
/**
* find the dom by the record in this component
* @param {Object} record the record used to find row dom
* @return jQuery
*/
findRow:function (record) {
var _self = this;
return $(_self.findElement(record));
},
/**
* find the cell dom by record and column id
* @param {String} id the column id
* @param {jQuery} rowEl the dom that showed in this component
* @return {jQuery}
*/
findCell : function(id,rowEl){
var cls = CLS_TD_PREFIX + id;
return rowEl.find('.' + cls);
},
/**
* 重新创建表格的首行，一般在表格初始化完成后，或者列发生改变时
*/
resetHeaderRow:function () {
if(!this.get('useHeaderRow')){
return;
}
var _self = this,
headerRowEl = _self.get('headerRowEl'),
tbodyEl = _self.get('tbodyEl');
if(headerRowEl){
headerRowEl.remove();
}
headerRowEl = _self._createHeaderRow();
headerRowEl.prependTo(tbodyEl);
_self.set('headerRowEl', headerRowEl);
},
/**
* when header's column width changed, column in this component changed followed
* @ignore
*/
resetColumnsWidth:function (column,width) {
var _self = this,
headerRowEl = _self.get('headerRowEl'),
cell = _self.findCell(column.get('id'), headerRowEl);
width = width || column.get('width');
if (cell) {
cell.width(width);
}
_self.setTableWidth();
},
//set table width
setTableWidth:function (columnsWidth) {
if(!columnsWidth && isPercent(this.get('width'))){
this.get('tableEl').width('100%');
return;
}
var _self = this,
width = _self._getInnerWidth(),
height = _self.get('height'),
tableEl = _self.get('tableEl'),
forceFit = _self.get('forceFit'),
headerRowEl = _self.get('headerRowEl');
//使用百分比的宽度，不进行计算
if(!isPercent(columnsWidth)){
columnsWidth = columnsWidth || _self._getColumnsWidth();
if (!width) {
return;
}
if (width >= columnsWidth) {
columnsWidth = width;
if (height) {
var scrollWidth = (UA.ie == 6 || UA.ie == 7) ? CLS_SCROLL_WITH + 2 : CLS_SCROLL_WITH;
columnsWidth = width - scrollWidth;
}
}
}
tableEl.width(columnsWidth);
},
/**
* 表格表体的宽度
* @param {Number} width 宽度
*/
setBodyWidth : function(width){
var _self = this,
bodyEl = _self.get('bodyEl');
width = width || _self._getInnerWidth();
bodyEl.width(width);
},
/**
* 设置表体高度
* @param {Number} height 高度
*/
setBodyHeight : function(height){
var _self = this,
bodyEl = _self.get('bodyEl'),
bodyHeight = height,
siblings = bodyEl.siblings();
BUI.each(siblings,function(item){
if($(item).css('display') !== 'none'){
bodyHeight -= $(item).outerHeight();
}
});
bodyEl.height(bodyHeight);
},
//show or hide column
setColumnVisible:function (column) {
var _self = this,
hide = !column.get('visible'),
colId = column.get('id'),
tbodyEl = _self.get('tbodyEl'),
cells = $('.' + CLS_TD_PREFIX + colId,tbodyEl);
if (hide) {
cells.hide();
} else {
cells.show();
}
},
/**
* 更新数据
* @param {Object} record 更新的数据
*/
updateItem : function(record){
var _self = this,
items = _self.getItems(),
index = BUI.Array.indexOf(record,items),
columns = _self._getColumns(),
element = null,
tpl;
if(index >=0 ){
element = _self.findElement(record);
BUI.each(columns,function(column){
var cellEl = _self.findCell(column.get('id'),$(element)),
innerEl = cellEl.find('.' + CLS_GRID_CELL_INNER),
textTpl = _self._getCellText(column,record,index);
innerEl.html(textTpl);
});
return element;
}
},
/**
* 显示没有数据时的提示信息
*/
showEmptyText : function(){
var _self = this,
bodyEl = _self.get('bodyEl'),
emptyDataTpl = _self.get('emptyDataTpl'),
emptyEl = _self.get('emptyEl');
if(emptyEl){
emptyEl.remove();
}
var emptyEl = $(emptyDataTpl).appendTo(bodyEl);
_self.set('emptyEl',emptyEl);
},
/**
* 清除没有数据时的提示信息
*/
clearEmptyText : function(){
var _self = this,
emptyEl = _self.get('emptyEl');
if(emptyEl){
emptyEl.remove();
}
},
//设置第一行空白行，不显示任何数据，仅用于设置列的宽度
_createHeaderRow:function () {
var _self = this,
columns = _self._getColumns(),
tbodyEl = _self.get('tbodyEl'),
rowTpl = _self.get('headerRowTpl'),
rowEl,
cellsTpl = [];
$.each(columns, function (index,column) {
cellsTpl.push(_self._getHeaderCellTpl(column));
});
//if this component set width,add a empty column to fit row width
if(_self.get('useEmptyCell')/* && !_self.get('forceFit')*/){
cellsTpl.push(_self._getEmptyCellTpl());
}
rowTpl = BUI.substitute(rowTpl,{cellsTpl:cellsTpl.join('')});
rowEl = $(rowTpl).appendTo(tbodyEl);
return rowEl;
},
//get the sum of the columns' width
_getColumnsWidth:function () {
var _self = this,
columns = _self.get('columns'),
totalWidth = 0;
BUI.each(columns, function (column) {
if (column.get('visible')) {
totalWidth += column.get('el').outerWidth();
}
});
return totalWidth;
},
//获取列集合
_getColumns : function(){
return this.get('columns');
},
//get cell text by record and column
_getCellText:function (column, record,index) {
var _self = this,
dataIndex = column.get('dataIndex'),
textTpl = column.get('cellTpl') || _self.get('cellTextTpl'),
text = _self._getCellInnerText(column,dataIndex, record,index);
return BUI.substitute(textTpl,{text:text, tips:_self._getTips(column, dataIndex, record)});
},
_getCellInnerText : function(column,dataIndex, record,index){
//renderer 时发生错误可能性很高
try{
var _self = this,
renderer = column.get('renderer'),
text = renderer ? renderer(record[dataIndex], record,index) : record[dataIndex];
return text == null ? '' : text;
}catch(ex){
throw 'column:' + column.get('title') +' fomat error!';
}
},
//get cell template by config and record
_getCellTpl:function (column, dataIndex, record,index) {
var _self = this,
cellText = _self._getCellText(column, record,index),
cellTpl = _self.get('cellTpl');
return BUI.substitute(cellTpl,{
elCls : column.get('elCls'),
id:column.get('id'),
dataIndex:dataIndex,
cellText:cellText,
hideCls:!column.get('visible') ? CLS_HIDE : ''
});
},
//获取空白单元格的模板
_getEmptyCellTpl:function () {
return '<td class="' + CLS_GRID_CELL + ' ' + CLS_CELL_EMPTY + '"> </td>';
},
//获取空白行单元格模板
_getHeaderCellTpl:function (column) {
var _self = this,
headerCellTpl = _self.get('headerCellTpl');
return BUI.substitute(headerCellTpl,{
id:column.get('id'),
width:column.get('width'),
hideCls:!column.get('visible') ? CLS_HIDE : ''
});
},
//获取表格内宽度
_getInnerWidth : function(){
return getInnerWidth(this.get('width'));
},
//get cell tips
_getTips:function (column, dataIndex, record) {
var showTip = column.get('showTip'),
value = '';
if (showTip) {
value = record[dataIndex];
if (BUI.isFunction(showTip)) {
value = showTip(value, record);
}
}
return value;
},
//设置单元格边框
_uiSetInnerBorder : function(v){
var _self = this,
el = _self.get('el');
if(v){
el.addClass(CLS_GRID_BORDER);
}else{
el.removeClass(CLS_GRID_BORDER);
}
},
//设置表格模板
_setTableTpl : function(tpl){
var _self = this,
bodyEl = _self.get('bodyEl');
tpl = tpl || _self.get('tableTpl');
$(tpl).appendTo(bodyEl);
var tableEl = bodyEl.find('table'),
tbodyEl = bodyEl.find('tbody');
//headerRowEl = _self._createHeaderRow();
_self.set('tableEl',tableEl);
_self.set('tbodyEl',tbodyEl);
//_self.set('headerRowEl', headerRowEl);
_self.set('itemContainer',tbodyEl);
_self._setTableCls(_self.get('tableCls'));
},
//设置table上的样式
_uiSetTableCls : function(v){
this._setTableCls(v);
},
//when set grid's height,the scroll can effect the width of its body and header
_uiSetHeight:function (h) {
var _self = this,
bodyEl = _self.get('bodyEl');
_self.get('el').height(h);
_self.get('el').addClass(CLS_GRID_HEIGHT);
},
_uiSetWidth:function (w) {
var _self = this;
_self.get('el').width(w);
_self.setBodyWidth(_self._getInnerWidth(w));
_self.get('el').addClass(CLS_GRID_WITH);
},
_uiSetStripeRows : function(v){
var _self = this,
method = v ? 'addClass' : 'removeClass';
_self.get('el')[method](CLS_GRID_STRIPE);
},
_setTableCls : function(cls){
var _self = this,
tableEl = _self.get('tableEl');
tableEl.attr('class',cls);
}
},{
ATTRS : {
tableCls : {},
bodyEl : {},
tbodyEl : {},
headerRowEl:{},
tableEl : {},
emptyEl : {}
}
},{
xclass : 'grid-view'
});
/**
* @class BUI.Grid.Grid
*
* 表格控件,表格控件类图，一般情况下配合{@link BUI.Data.Store} 一起使用
* <p>
* <img src="../assets/img/class-grid.jpg"/>
* </p>
* <p>表格插件的类图：</p>
* <p>
* <img src="../assets/img/class-grid-plugins.jpg"/>
* </p>
*
* <pre><code>
* BUI.use(['bui/grid','bui/data'],function(Grid,Data){
* var Grid = Grid,
* Store = Data.Store,
* columns = [{ //声明列模型
* title : '表头1(20%)',
* dataIndex :'a',
* width:'20%'
* },{
* id: '123',
* title : '表头2(30%)',
* dataIndex :'b',
* width:'30%'
* },{
* title : '表头3(50%)',
* dataIndex : 'c',
* width:'50%'
* }],
* data = [{a:'123'},{a:'cdd',b:'edd'},{a:'1333',c:'eee',d:2}]; //显示的数据
*
* var store = new Store({
* data : data,
* autoLoad:true
* }),
* grid = new Grid.Grid({
* render:'#grid',
* width:'100%',//这个属性一定要设置
* columns : columns,
* idField : 'a',
* store : store
* });
*
* grid.render();
* });
* </code></pre>
* @extends BUI.List.SimpleList
*/
var grid = List.SimpleList.extend({
/**
* @protected
* @ignore
*/
createDom:function () {
var _self = this,
render = _self.get('render'),
outerWidth = $(render).width(),
width = _self.get('width');
if(!width && outerWidth){
var appendWidth = _self.getAppendWidth();
_self.set('width',outerWidth - appendWidth);
}
// 提前,中途设置宽度时会失败！！
if (_self.get('width')) {
_self.get('el').addClass(CLS_GRID_WITH);
}
if (_self.get('height')) {
_self.get('el').addClass(CLS_GRID_HEIGHT);
}
//因为内部的边距影响header的forceFit计算，所以必须在header计算forceFit前置此项
if(_self.get('innerBorder')){
_self.get('el').addClass(CLS_GRID_BORDER);
}
},
/**
* @protected
* @ignore
*/
renderUI : function(){
var _self = this;
_self._initHeader();
_self._initBars();
_self._initLoadMask();
_self.get('view').resetHeaderRow();
},
/**
* @private
*/
bindUI:function () {
var _self = this;
_self._bindHeaderEvent();
_self._bindBodyEvent();
_self._bindItemsEvent();
},
/**
* 添加列
* <pre><code>
* //添加到最后
* grid.addColumn({title : 'new column',dataIndex : 'new',width:100});
* //添加到最前
* grid.addColumn({title : 'new column',dataIndex : 'new',width:100},0);
* </code></pre>
* @param {Object|BUI.Grid.Column} column 列的配置，列类的定义 {@link BUI.Grid.Column}
* @param {Number} index 添加到的位置
* @return {BUI.Grid.Column}
*/
addColumn : function(column, index){
var _self = this,
header = _self.get('header');
if(header){
column = header.addColumn(column, index);
}else{
column = new Column(column);
_self.get('columns').splice(index,0,column);
}
return column;
},
/**
* 清除显示的数据
* <pre><code>
* grid.clearData();
* </code></pre>
*/
clearData : function(){
this.clearItems();
},
/**
* 当前显示在表格中的数据
* @return {Array} 纪录集合
* @private
*/
getRecords : function(){
return this.getItems();
},
/**
* 使用索引或者id查找列
* <pre><code>
* //设置列的id,否则会自动生成
* {id : '1',title : '表头',dataIndex : 'a'}
* //获取列
* var column = grid.findColumn('id');
* //操作列
* column.set('visible',false);
* </code></pre>
* @param {String|Number} id|index 文本值代表编号，数字代表索引
*/
findColumn : function(id){
var _self = this,
header = _self.get('header');
if(BUI.isNumber(id)){
return header.getColumnByIndex(id);
}else{
return header.getColumnById(id);
}
},
/**
* 使用字段名查找列
* <pre><code>
* //设置列dataIndex
* {id : '1',title : '表头',dataIndex : 'a'}
* //获取列
* var column = grid.findColumnByField('a');
* //操作列
* column.set('visible',false);
* </code></pre>
* @param {String} field 列的字段名 dataIndex
*/
findColumnByField : function(field){
var _self = this,
header = _self.get('header');
return header.getColumn(function(column){
return column.get('dataIndex') === field;
});
},
/**
* 根据列的Id查找对应的单元格
* @param {String|Number} id 列id
* @param {Object|jQuery} record 本行对应的记录，或者是本行的ＤＯＭ对象
* @protected
* @return {jQuery}
*/
findCell:function (id, record) {
var _self = this,
rowEl = null;
if (record instanceof $) {
rowEl = record;
} else {
rowEl = _self.findRow(record);
}
if (rowEl) {
return _self.get('view').findCell(id, rowEl);
}
return null;
},
/**
* find the dom by the record in this component
* @param {Object} record the record used to find row dom
* @protected
* @return jQuery
*/
findRow:function (record) {
var _self = this;
return _self.get('view').findRow(record);
},
/**
* 移除列
* <pre><code>
* var column = grid.findColumn('id');
* grid.removeColumn(column);
* </code></pre>
* @param {BUI.Grid.Column} column 要移除的列
*/
removeColumn:function (column) {
var _self = this;
_self.get('header').removeColumn(column);
},
/**
* 显示数据,当不使用store时，可以单独显示数据
* <pre><code>
* var data = [{},{}];
* grid.showData(data);
* </code></pre>
* @param {Array} data 显示的数据集合
*/
showData : function(data){
var _self = this;
_self.set('items',data);
},
/**
* 重置列，当列发生改变时同步DOM和数据
* @protected
*/
resetColumns:function () {
var _self = this,
store = _self.get('store');
//recreate the header row
_self.get('view').resetHeaderRow();
//show data
if (store) {
_self.onLoad();
}
},
//when body scrolled,the other component of grid also scrolled
_bindScrollEvent:function () {
var _self = this,
el = _self.get('el'),
bodyEl = el.find('.' + CLS_GRID_BODY),
header = _self.get('header');
bodyEl.on('scroll', function () {
var left = bodyEl.scrollLeft(),
top = bodyEl.scrollTop();
header.scrollTo({left:left, top:top});
_self.fire('scroll', {scrollLeft:left, scrollTop:top,bodyWidth : bodyEl.width(),bodyHeight : bodyEl.height()});
});
},
//bind header event,when column changed,followed this component
_bindHeaderEvent:function () {
var _self = this,
header = _self.get('header'),
view = _self.get('view'),
store = _self.get('store');
header.on('afterWidthChange', function (e) {
var sender = e.target;
if (sender !== header) {
view.resetColumnsWidth(sender);
}
});
header.on('afterSortStateChange', function (e) {
var column = e.target,
val = e.newVal;
if (val && store) {
store.sort(column.get('dataIndex'), column.get('sortState'));
}
});
header.on('afterVisibleChange', function (e) {
var sender = e.target;
if (sender !== header) {
view.setColumnVisible(sender);
_self.fire('columnvisiblechange',{column:sender});
}
});
header.on('click', function (e) {
var sender = e.target;
if (sender !== header) {
_self.fire('columnclick',{column:sender,domTarget:e.domTarget});
}
});
header.on('forceFitWidth', function () {
if (_self.get('rendered')) {
_self.resetColumns();
}
});
header.on('add', function (e) {
if (_self.get('rendered')) {
_self.fire('columnadd',{column:e.column,index:e.index});
_self.resetColumns();
}
});
header.on('remove', function (e) {
if (_self.get('rendered')) {
_self.resetColumns();
_self.fire('columnremoved',{column:e.column,index:e.index});
}
});
},
//when body scrolled, header can followed
_bindBodyEvent:function () {
var _self = this;
_self._bindScrollEvent();
},
//绑定记录DOM相关的事件
_bindItemsEvent : function(){
var _self = this,
store = _self.get('store');
_self.on('itemsshow',function(){
_self.fire('aftershow');
});
_self.on('itemsclear',function(){
_self.fire('clear');
});
_self.on('itemclick',function(ev){
var target = ev.domTarget,
record = ev.item,
cell = $(target).closest('.' + CLS_GRID_CELL),
rowEl = $(target).closest('.' + CLS_GRID_ROW),
rst; //用于是否阻止事件触发
if(cell.length){
rst = _self.fire('cellclick', {record:record, row:rowEl[0], cell:cell[0], field:cell.attr(ATTR_COLUMN_FIELD), domTarget:target,domEvent:ev.domEvent});
}
if(rst === false){
return rst;
}
return _self.fire('rowclick', {record:record, row:rowEl[0], domTarget:target});
});
_self.on('itemunselected',function(ev){
_self.fire('rowunselected',getEventObj(ev));
});
_self.on('itemselected',function(ev){
_self.fire('rowselected',getEventObj(ev));
});
_self.on('itemrendered',function(ev){
_self.fire('rowcreated',getEventObj(ev));
});
_self.on('itemremoved',function(ev){
_self.fire('rowremoved',getEventObj(ev));
});
_self.on('itemupdated',function(ev){
_self.fire('rowupdated',getEventObj(ev));
});
function getEventObj(ev){
return {record : ev.item, row : ev.domTarget, domTarget : ev.domTarget};
}
},
//获取表格内部的宽度，受边框的影响，
//内部的宽度不能等于表格宽度
_getInnerWidth : function(width){
width = width || this.get('width');
return getInnerWidth(width);
},
//init header,if there is not a header property in config,instance it
_initHeader:function () {
var _self = this,
header = _self.get('header'),
container = _self.get('el').find('.'+ CLS_GRID_HEADER_CONTAINER);
if (!header) {
header = new Header({
columns:_self.get('columns'),
tableCls:_self.get('tableCls'),
forceFit:_self.get('forceFit'),
width:_self._getInnerWidth(),
render: container,
parent : _self
}).render();
//_self.addChild(header);
_self.set('header', header);
}
},
//初始化 上下工具栏
_initBars:function () {
var _self = this,
bbar = _self.get('bbar'),
tbar = _self.get('tbar');
_self._initBar(bbar, CLS_GRID_BBAR, 'bbar');
_self._initBar(tbar, CLS_GRID_TBAR, 'tbar');
},
//set bar's elCls to identify top bar or bottom bar
_initBar:function (bar, cls, name) {
var _self = this,
store = null,
pagingBarCfg = null;
if (bar) {
//未指定xclass,同时不是Controller时
if(!bar.xclass && !(bar instanceof Component.Controller)){
bar.xclass = 'bar';
bar.children = bar.children || [];
if(bar.items){
bar.children.push({
xclass : 'bar',
defaultChildClass : "bar-item-button",
elCls : CLS_BUTTON_BAR,
children : bar.items
});
bar.items=null;
}
// modify by fuzheng
if(bar.pagingBar){
store = _self.get('store');
pagingBarCfg = {
xclass : 'pagingbar',
store : store,
pageSize : store.pageSize
};
if(bar.pagingBar !== true){
pagingBarCfg = BUI.merge(pagingBarCfg, bar.pagingBar);
}
bar.children.push(pagingBarCfg);
}
}
if (bar.xclass) {
var barContainer = _self.get('el').find('.' + cls);
barContainer.show();
bar.render = barContainer;
//bar.parent=_self;
bar.elTagName = 'div';
bar.autoRender = true;
bar = _self.addChild(bar); //Component.create(bar).create();
}
_self.set(name, bar);
}
return bar;
},
//when set 'loadMask = true' ,create a loadMask instance
_initLoadMask:function () {
var _self = this,
loadMask = _self.get('loadMask');
if (loadMask && !loadMask.show) {
loadMask = new BUI.Mask.LoadMask({el:_self.get('el')});
_self.set('loadMask', loadMask);
}
},
//调整宽度时，调整内部控件宽度
_uiSetWidth:function (w) {
var _self = this;
if (_self.get('rendered')) {
if(!isPercent(w)){
_self.get('header').set('width', _self._getInnerWidth(w));
}else{
_self.get('header').set('width','100%');
}
}
_self.get('view').setTableWidth();
},
//设置自适应宽度
_uiSetForceFit:function (v) {
var _self = this;
_self.get('header').set('forceFit', v);
},
//when set grid's height,the scroll can effect the width of its body and header
_uiSetHeight:function (h,obj) {
var _self = this,
header = _self.get('header');
_self.get('view').setBodyHeight(h);
if (_self.get('rendered')) {
if (_self.get('forceFit') && !obj.prevVal) {
header.forceFitColumns();
//强迫对齐时，由未设置高度改成设置高度，增加了17像素的滚动条宽度，所以重置表格宽度
_self.get('view').setTableWidth();
}
header.setTableWidth();
}
},
/**
* 加载数据
* @protected
*/
onLoad : function(){
var _self = this,
store = _self.get('store');
grid.superclass.onLoad.call(this);
if(_self.get('emptyDataTpl')){ //初始化的时候不显示空白数据的文本
if(store && store.getCount() == 0){
_self.get('view').showEmptyText();
}else{
_self.get('view').clearEmptyText();
}
}
}
},{
ATTRS : {
/**
* 表头对象
* @type {BUI.Grid.Header}
* @protected
*/
header:{
},
/**
* @see {BUI.Grid.Grid#tbar}
* <pre><code>
* grid = new Grid.Grid({
* render:'#grid',
* columns : columns,
* width : 700,
* forceFit : true,
* tbar:{ //添加、删除
* items : [{
* btnCls : 'button button-small',
* text : '<i class="icon-plus"></i>添加',
* listeners : {
* 'click' : addFunction
* }
* },
* {
* btnCls : 'button button-small',
* text : '<i class="icon-remove"></i>删除',
* listeners : {
* 'click' : delFunction
* }
* }]
* },
* store : store
* });
*
* grid.render();
* </code></pre>
* @cfg {Object|BUI.Toolbar.Bar} bbar
*/
/**
* @see {BUI.Grid.Grid#tbar}
* @type {Object}
* @ignore
*/
bbar:{
},
itemCls : {
value : CLS_GRID_ROW
},
/**
* 列的配置 用来配置 表头 和 表内容。{@link BUI.Grid.Column}
* @cfg {Array} columns
*/
columns:{
view : true,
value:[]
},
/**
* 强迫列自适应宽度，如果列宽度大于Grid整体宽度，等比例缩减，否则等比例增加
* <pre><code>
* var grid = new Grid.Grid({
* render:'#grid',
* columns : columns,
* width : 700,
* forceFit : true, //自适应宽度
* store : store
* });
* </code></pre>
* @cfg {Boolean} [forceFit= false]
*/
/**
* 强迫列自适应宽度，如果列宽度大于Grid整体宽度，等比例缩减，否则等比例增加
* <pre><code>
* grid.set('forceFit',true);
* </code></pre>
* @type {Boolean}
* @default 'false'
*/
forceFit:{
sync:false,
view : true,
value:false
},
/**
* 数据为空时，显示的提示内容
* <pre><code>
* var grid = new Grid({
* render:'#J_Grid4',
* columns : columns,
* store : store,
* emptyDataTpl : '<div class="centered"><img alt="Crying" src="http://img03.taobaocdn.com/tps/i3/T1amCdXhXqXXXXXXXX-60-67.png"><h2>查询的数据不存在</h2></div>',
* width:'100%'
*
* });
*
* grid.render();
* </code></pre>
** @cfg {Object} emptyDataTpl
*/
emptyDataTpl : {
view : true
},
/**
* 表格首行记录模板，首行记录，隐藏显示，用于确定表格各列的宽度
* @type {String}
* @protected
*/
headerRowTpl:{
view:true,
value:'<tr class="' + PREFIX + 'grid-header-row">{cellsTpl}</tr>'
},
/**
* 表格首行记录的单元格模板
* @protected
* @type {String}
*/
headerCellTpl:{
view:true,
value:'<td class="{hideCls} ' + CLS_TD_PREFIX + '{id}" width="{width}" style="height:0"></td>'
},
/**
* 表格数据行的模板
* @type {String}
* @default <pre>'<tr class="' + CLS_GRID_ROW + ' {{oddCls}}">{{cellsTpl}}</tr>'</pre>
*/
rowTpl:{
view:true,
value:'<tr class="' + CLS_GRID_ROW + ' {oddCls}">{cellsTpl}</tr>'
},
/**
* 单元格的模板
* @type {String}
* <pre>
* '<td class="' + CLS_GRID_CELL + ' grid-td-{{id}}" data-column-id="{{id}}" data-column-field = {{dataIndex}}>'+
* '<div class="' + CLS_GRID_CELL_INNER + '" >{{cellText}}</div>'+
* '</td>'
*</pre>
*/
cellTpl:{
view:true,
value:'<td class="{elCls} {hideCls} ' + CLS_GRID_CELL + ' ' + CLS_TD_PREFIX + '{id}" data-column-id="{id}" data-column-field = "{dataIndex}" >' +
'<div class="' + CLS_GRID_CELL_INNER + '" >{cellText}</div>' +
'</td>'
},
/**
* 单元格文本的模板
* @default <span class="' + CLS_CELL_TEXT + ' " title = "{{tips}}">{{text}}</span>
* @type {String}
*/
cellTextTpl:{
view:true,
value:'<span class="' + CLS_CELL_TEXT + ' " title = "{tips}">{text}</span>'
},
/**
* 事件集合
* @type {Object}
*/
events:{
value:{
/**
* 显示完数据触发
* @event
*/
'aftershow' : false,
/**
* 表格的数据清理完成后
* @event
*/
'clear' : false,
/**
* 点击单元格时触发,如果return false,则会阻止 'rowclick' ,'rowselected','rowunselected'事件
* @event
* @param {jQuery.Event} e 事件对象
* @param {Object} e.record 此行的记录
* @param {String} e.field 点击单元格列对应的字段名称
* @param {HTMLElement} e.row 点击行对应的DOM
* @param {HTMLElement} e.cell 点击对应的单元格的DOM
* @param {HTMLElement} e.domTarget 点击的DOM
* @param {jQuery.Event} e.domEvent 点击的jQuery事件
*/
'cellclick' : false,
/**
* 点击表头
* @event
* @param {jQuery.Event} e 事件对象
* @param {BUI.Grid.Column} e.column 列对象
* @param {HTMLElement} e.domTarget 点击的DOM
*/
'columnclick' : false,
/**
* 点击行时触发，如果return false,则会阻止'rowselected','rowunselected'事件
* @event
* @param {jQuery.Event} e 事件对象
* @param {Object} e.record 此行的记录
* @param {HTMLElement} e.row 点击行对应的DOM
* @param {HTMLElement} e.domTarget 点击的DOM
*/
'rowclick' : false,
/**
* 当一行数据显示在表格中后触发
* @event
* @param {jQuery.Event} e 事件对象
* @param {Object} e.record 此行的记录
* @param {HTMLElement} e.row 行对应的DOM
* @param {HTMLElement} e.domTarget 此事件中等于行对应的DOM
*/
'rowcreated' : false,
/**
* 移除一行的DOM后触发
* @event
* @param {jQuery.Event} e 事件对象
* @param {Object} e.record 此行的记录
* @param {HTMLElement} e.row 行对应的DOM
* @param {HTMLElement} e.domTarget 此事件中等于行对应的DOM
*/
'rowremoved' : false,
/**
* 选中一行时触发
* @event
* @param {jQuery.Event} e 事件对象
* @param {Object} e.record 此行的记录
* @param {HTMLElement} e.row 行对应的DOM
* @param {HTMLElement} e.domTarget 此事件中等于行对应的DOM
*/
'rowselected' : false,
/**
* 清除选中一行时触发，只有多选情况下触发
* @event
* @param {jQuery.Event} e 事件对象
* @param {Object} e.record 此行的记录
* @param {HTMLElement} e.row 行对应的DOM
* @param {HTMLElement} e.domTarget 此事件中等于行对应的DOM
*/
'rowunselected' : false,
/**
* 表格内部发生滚动时触发
* @event
* @param {jQuery.Event} e 事件对象
* @param {Number} e.scrollLeft 滚动到的横坐标
* @param {Number} e.scrollTop 滚动到的纵坐标
* @param {Number} e.bodyWidth 表格内部的宽度
* @param {Number} e.bodyHeight 表格内部的高度
*/
'scroll' : false
}
},
/**
* 是否奇偶行添加分割色
* @type {Boolean}
* @default true
*/
stripeRows:{
view:true,
value:true
},
/**
* 顶层的工具栏，跟bbar结构一致,可以是工具栏对象@see {BUI.Toolbar.Bar},也可以是xclass形式的配置项，
* 还可以是包含以下字段的配置项
* <ol>
* <li>items:工具栏的项，
* - 默认是按钮(xtype : button)、
* - 文本(xtype : text)、
* - 链接(xtype : link)、
* - 分隔符(bar-item-separator)以及自定义项
* </li>
* <li>pagingBar:表明包含分页栏</li>
* </ol>
* @type {Object|BUI.Toolbar.Bar}
* @example
* tbar:{
* items:[
* {
* text:'命令一' //默认是按钮
*
* },
* {
* xtype:'text',
* text:'文本'
* }
* ],
* pagingBar:true
* }
*/
tbar:{
},
/**
* 可以附加到表格上的样式.
* @cfg {String} tableCls
* @default 'bui-grid-table' this css cannot be overridden
*/
tableCls:{
view : true,
sync : false,
value:PREFIX + 'grid-table'
},
/**
* 表体的模板
* @protected
* @type {String}
*/
tableTpl : {
view:true,
value:'<table cellspacing="0" cellpadding="0" >' +
'<tbody></tbody>' +
'</table>'
},
tpl : {
value : '<div class="'+CLS_GRID_TBAR+'" style="display:none"></div><div class="'+CLS_GRID_HEADER_CONTAINER+'"></div><div class="'+CLS_GRID_BODY+'"></div><div style="display:none" class="' + CLS_GRID_BBAR + '"></div>'
},
/**
* 单元格左右之间是否出现边框
*
* @cfg {Boolean} [innerBorder=true]
*/
/**
* 单元格左右之间是否出现边框
* <pre><code>
* var grid = new Grid.Grid({
* render:'#grid',
* innerBorder: false, // 默认为true
* columns : columns,
* store : store
* });
* </code></pre>
* @type {Boolean}
* @default true
*/
innerBorder : {
sync:false,
value : true
},
/**
* 是否使用空白单元格用于占位，使列宽等于设置的宽度
* @type {Boolean}
* @private
*/
useEmptyCell : {
view : true,
value : true
},
/**
* 是否首行使用空白行，用以确定表格列的宽度
* @type {Boolean}
* @private
*/
useHeaderRow : {
view : true,
value : true
},
/**
* Grid 的视图类型
* @type {BUI.Grid.GridView}
*/
xview : {
value : gridView
}
}
},{
xclass : 'grid'
});
grid.View = gridView;
return grid;
});
define('bui/tree/treelist',['bui/common','bui/list','bui/tree/treemixin','bui/tree/selection'],function (require) {
var BUI = require('bui/common'),
List = require('bui/list'),
Mixin = require('bui/tree/treemixin'),
Selection = require('bui/tree/selection');
/**
* @class BUI.Tree.TreeList
* 树形列表控件
* ** 你可以简单的使用配置数据 **
* <pre><code>
* BUI.use('bui/tree',function(Tree){
* var tree = new Tree.TreeList({
* render : '#t1',
* nodes : [
* {id : '1',text : '1',children : [{id : '11',text : '11'}]},
* {id : '2',text : '2'}
* ]
* });
* tree.render();
* });
* </code></pre>
* ** 你也可以显示根节点 **
* <pre><code>
* BUI.use('bui/tree',function(Tree){
* var tree = new Tree.TreeList({
* render : '#t1',
* root :{
* id : '0',
* text : '0',
* children : [
* {id : '1',text : '1',children : [{id : '11',text : '11'}]},
* {id : '2',text : '2'}
* ]
* },
* showRoot : true
* });
* tree.render();
* });
* </code></pre>
*
* ** 你也可以异步加载数据 **
* <pre><code>
* BUI.use(['bui/tree','bui/data'],function(Tree,Data){
* var store = new Data.TreeStore({
* root :{
* id : '0',
* text : '0'
* },
* url : 'data/nodes.php'
* }),
* tree = new Tree.TreeList({
* render : '#t1',
* store : store,
* showRoot : true //可以不配置，则不显示根节点
* });
* tree.render();
* store.load({id : '0'});//加载根节点，也可以让用户点击加载
* });
* </code></pre>
*
* ** 你还可以替换icon **
* <pre><code>
* BUI.use('bui/tree',function(Tree){
* var tree = new Tree.TreeList({
* render : '#t1',
* dirCls : 'folder', //替换树节点的样式
* leafCls : 'file', //叶子节点的样式
* nodes : [ //数据中存在cls 会替换节点的图标样式
* {id : '1',text : '1'cls:'task-folder',children : [{id : '11',text : '11',cls:'task'}]},
* {id : '2',text : '2'}
* ]
* });
* tree.render();
* });
* @mixin BUI.Tree.Mixin
* @extends BUI.List.SimpleList
*/
var TreeList = List.SimpleList.extend([Mixin,Selection],{
},{
ATTRS : {
itemCls : {
value : BUI.prefix + 'tree-item'
},
itemTpl : {
value : '<li>{text}</li>'
},
idField : {
value : 'id'
}
}
},{
xclass : 'tree-list'
});
return TreeList;
});
define('bui/calendar/monthpicker',['bui/common','bui/overlay','bui/list','bui/toolbar'],function (require){
var BUI = require('bui/common'),
Component = BUI.Component,
Overlay = require('bui/overlay').Overlay,
List = require('bui/list').SimpleList,
Toolbar = require('bui/toolbar'),
PREFIX = BUI.prefix,
CLS_MONTH = 'x-monthpicker-month',
DATA_MONTH = 'data-month',
DATA_YEAR = 'data-year',
CLS_YEAR = 'x-monthpicker-year',
CLS_YEAR_NAV = 'x-monthpicker-yearnav',
CLS_SELECTED = 'x-monthpicker-selected',
CLS_ITEM = 'x-monthpicker-item',
months = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
function getMonths(){
return $.map(months,function(month,index){
return {text:month,value:index};
});
}
var MonthPanel = List.extend({
bindUI : function(){
var _self = this;
_self.get('el').delegate('a','click',function(ev){
ev.preventDefault();
}).delegate('.' + CLS_MONTH,'dblclick',function(){
_self.fire('dblclick');
});
}
},{
ATTRS:{
itemTpl:{
view:true,
value : '<li class="'+CLS_ITEM+' x-monthpicker-month"><a href="#" hidefocus="on">{text}</a></li>'
},
itemCls : {
value : CLS_ITEM
},
items:{
view:true,
value:getMonths()
},
elCls : {
view:true,
value:'x-monthpicker-months'
}
}
},{
xclass:'calendar-month-panel'
});
var YearPanel = List.extend({
bindUI : function(){
var _self = this,
el = _self.get('el');
el.delegate('a','click',function(ev){
ev.preventDefault();
});
el.delegate('.' + CLS_YEAR,'dblclick',function(){
_self.fire('dblclick');
});
el.delegate('.x-icon','click',function(ev){
var sender = $(ev.currentTarget);
if(sender.hasClass(CLS_YEAR_NAV + '-prev')){
_self._prevPage();
}else if(sender.hasClass(CLS_YEAR_NAV + '-next')){
_self._nextPage();
}
});
_self.on('itemselected',function(ev){
if(ev.item){
_self.setInternal('year',ev.item.value);
}
});
},
_prevPage : function(){
var _self = this,
start = _self.get('start'),
yearCount = _self.get('yearCount');
_self.set('start',start - yearCount);
},
_nextPage : function(){
var _self = this,
start = _self.get('start'),
yearCount = _self.get('yearCount');
_self.set('start',start + yearCount);
},
_uiSetStart : function(){
var _self = this;
_self._setYearsContent();
},
_uiSetYear : function(v){
var _self = this,
item = _self.findItemByField('value',v);
if(item){
_self.setSelectedByField(v);
}else{
_self.set('start',v);
}
},
_setYearsContent : function(){
var _self = this,
year = _self.get('year'),
start = _self.get('start'),
yearCount = _self.get('yearCount'),
items = [];
for(var i = start;i< start + yearCount;i++){
var text = i.toString();
items.push({text:text,value:i});
}
_self.set('items',items);
_self.setSelectedByField(year);
}
},{
ATTRS:{
items:{
view:true,
value:[]
},
elCls : {
view:true,
value:'x-monthpicker-years'
},
itemCls : {
value : CLS_ITEM
},
year:{
},
/**
* 起始年
* @private
* @ignore
* @type {Number}
*/
start:{
value: new Date().getFullYear()
},
/**
* 年数
* @private
* @ignore
* @type {Number}
*/
yearCount:{
value:10
},
itemTpl : {
view:true,
value : '<li class="'+CLS_ITEM+' '+CLS_YEAR+'"><a href="#" hidefocus="on">{text}</a></li>'
},
tpl : {
view:true,
value:'<div class="'+CLS_YEAR_NAV+'">'+
'<span class="'+CLS_YEAR_NAV+'-prev x-icon x-icon-normal x-icon-small"><span class="icon icon-caret icon-caret-left"></span></span>'+
'<span class="'+CLS_YEAR_NAV+'-next x-icon x-icon-normal x-icon-small"><span class="icon icon-caret icon-caret-right"></span></span>'+
'</div>'+
'<ul></ul>'
}
}
},{
xclass:'calendar-year-panel'
});
/**
* 月份选择器
* xclass : 'calendar-monthpicker'
* @class BUI.Calendar.MonthPicker
* @extends BUI.Overlay.Overlay
*/
var monthPicker = Overlay.extend({
initializer : function(){
var _self = this,
children = _self.get('children'),
monthPanel = new MonthPanel(),
yearPanel = new YearPanel(),
footer = _self._createFooter();
children.push(monthPanel);
children.push(yearPanel);
children.push(footer);
_self.set('yearPanel',yearPanel);
_self.set('monthPanel',monthPanel);
},
bindUI : function(){
var _self = this;
_self.get('monthPanel').on('itemselected',function(ev){
if(ev.item){
_self.setInternal('month',ev.item.value);
}
}).on('dblclick',function(){
_self._successCall();
});
_self.get('yearPanel').on('itemselected',function(ev){
if(ev.item){
_self.setInternal('year',ev.item.value);
}
}).on('dblclick',function(){
_self._successCall();
});
},
_successCall : function(){
var _self = this,
callback = _self.get('success');
if(callback){
callback.call(_self);
}
},
_createFooter : function(){
var _self = this;
return new Toolbar.Bar({
elCls : PREFIX + 'clear x-monthpicker-footer',
children:[
{
xclass:'bar-item-button',
text:'确定',
btnCls: 'button button-small button-primary',
handler:function(){
_self._successCall();
}
},{
xclass:'bar-item-button',
text:'取消',
btnCls:'button button-small last',
handler:function(){
var callback = _self.get('cancel');
if(callback){
callback.call(_self);
}
}
}
]
});
},
_uiSetYear : function(v){
this.get('yearPanel').set('year',v);
},
_uiSetMonth:function(v){
this.get('monthPanel').setSelectedByField(v);
}
},{
ATTRS:
{
/**
* 下部工具栏
* @private
* @type {Object}
*/
footer : {
},
align : {
value : {}
},
/**
* 选中的年
* @type {Number}
*/
year : {
},
/**
* 成功的回调函数
* @type {Function}
*/
success:{
value : function(){
}
},
/**
* 取消的回调函数
* @type {Function}
*/
cancel :{
value : function(){}
},
width:{
value:180
},
/**
* 选中的月
* @type {Number}
*/
month:{
},
/**
* 选择年的控件
* @private
* @type {Object}
*/
yearPanel : {
},
/**
* 选择月的控件
* @private
* @type {Object}
*/
monthPanel:{
}
}
},{
xclass :'monthpicker'
});
return monthPicker;
});
define('bui/tree/treemenu',['bui/common','bui/list','bui/tree/treemixin'],function (require) {
var BUI = require('bui/common'),
List = require('bui/list'),
Mixin = require('bui/tree/treemixin');
var TreeMenuView = List.SimpleList.View.extend({
//覆写获取模板方法
getItemTpl : function (item,index) {
var _self = this,
render = _self.get('itemTplRender'),
itemTpl = item.leaf ? _self.get('leafTpl') : _self.get('dirTpl');
if(render){
return render(item,index);
}
return BUI.substitute(itemTpl,item);
}
},{
xclass : 'tree-menu-view'
});
/**
* @class BUI.Tree.Menu
* 树形列表控件
* ** 你可以简单的使用配置数据 **
* <pre><code>
* BUI.use('bui/tree',function(Tree){
* var tree = new Tree.Menu({
* render : '#t1',
* nodes : [
* {id : '1',text : '1',children : [{id : '11',text : '11'}]},
* {id : '2',text : '2'}
* ]
* });
* tree.render();
* });
* </code></pre>
*
* ** 你还可以替换icon **
* <pre><code>
* BUI.use('bui/tree',function(Tree){
* var tree = new Tree.Menu({
* render : '#t1',
* dirCls : 'folder', //替换树节点的样式
* leafCls : 'file', //叶子节点的样式
* nodes : [ //数据中存在cls 会替换节点的图标样式
* {id : '1',text : '1'cls:'task-folder',children : [{id : '11',text : '11',cls:'task'}]},
* {id : '2',text : '2'}
* ]
* });
* tree.render();
* });
* @mixin BUI.Tree.Mixin
* @extends BUI.List.SimpleList
*/
var TreeMenu = List.SimpleList.extend([Mixin],{
},{
ATTRS : {
itemCls : {
value : BUI.prefix + 'tree-item'
},
/**
* 文件夹是否可选，用于选择节点时，避免选中非叶子节点
* @cfg {Boolean} [dirSelectable = false]
*/
dirSelectable : {
value : false
},
/**
* 节点展开的事件
* @type {String}
*/
expandEvent : {
value : 'itemclick'
},
itemStatusFields : {
value : {
selected : 'selected'
}
},
/**
* 节点折叠的事件
* @type {String}
*/
collapseEvent : {
value : 'itemclick'
},
/**/xview : {
value : TreeMenuView
},
/**
* 非叶子节点的模板
* @type {String}
*/
dirTpl : {
view : true,
value : '<li class="{cls}"><a href="#">{text}</a></li>'
},
/**
* 叶子节点的模板
* @type {String}
*/
leafTpl : {
view : true,
value : '<li class="{cls}"><a href="{href}">{text}</a></li>'
},
idField : {
value : 'id'
}
}
},{
xclass : 'tree-menu'
});
TreeMenu.View = TreeMenuView;
return TreeMenu;
});