ligerComboBox.js 39 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070
  1. /**
  2. * jQuery ligerUI 1.1.9
  3. *
  4. * http://ligerui.com
  5. *
  6. * Author daomi 2012 [ gd_star@163.com ]
  7. *
  8. */
  9. (function ($)
  10. {
  11. $.fn.ligerComboBox = function (options)
  12. {
  13. return $.ligerui.run.call(this, "ligerComboBox", arguments);
  14. };
  15. $.fn.ligerGetComboBoxManager = function ()
  16. {
  17. return $.ligerui.run.call(this, "ligerGetComboBoxManager", arguments);
  18. };
  19. $.ligerDefaults.ComboBox = {
  20. resize: true, //是否调整大小
  21. isMultiSelect: false, //是否多选
  22. isShowCheckBox: false, //是否选择复选框
  23. columns: false, //表格状态
  24. selectBoxWidth: false, //宽度
  25. selectBoxHeight: false, //高度
  26. onBeforeSelect: false, //选择前事件
  27. onSelected: null, //选择值事件
  28. initValue: null,
  29. initText: null,
  30. valueField: 'id',
  31. textField: 'text',
  32. valueFieldID: null,
  33. slide: true, //是否以动画的形式显示
  34. split: ";",
  35. data: null,
  36. tree: null, //下拉框以树的形式显示,tree的参数跟LigerTree的参数一致
  37. treeLeafOnly: true, //是否只选择叶子
  38. grid: null, //表格
  39. onStartResize: null,
  40. onEndResize: null,
  41. hideOnLoseFocus: true,
  42. url: null, //数据源URL(需返回JSON)
  43. onSuccess: null,
  44. onError: null,
  45. onBeforeOpen: null, //打开下拉框前事件,可以通过return false来阻止继续操作,利用这个参数可以用来调用其他函数,比如打开一个新窗口来选择值
  46. render: null, //文本框显示html函数
  47. absolute: true //选择框是否在附加到body,并绝对定位
  48. };
  49. //扩展方法
  50. $.ligerMethos.ComboBox = $.ligerMethos.ComboBox || {};
  51. $.ligerui.controls.ComboBox = function (element, options)
  52. {
  53. $.ligerui.controls.ComboBox.base.constructor.call(this, element, options);
  54. };
  55. $.ligerui.controls.ComboBox.ligerExtend($.ligerui.controls.Input, {
  56. __getType: function ()
  57. {
  58. return 'ComboBox';
  59. },
  60. _extendMethods: function ()
  61. {
  62. return $.ligerMethos.ComboBox;
  63. },
  64. _init: function ()
  65. {
  66. $.ligerui.controls.ComboBox.base._init.call(this);
  67. var p = this.options;
  68. if (p.columns)
  69. {
  70. p.isShowCheckBox = true;
  71. }
  72. if (p.isMultiSelect)
  73. {
  74. p.isShowCheckBox = true;
  75. }
  76. },
  77. _render: function ()
  78. {
  79. var g = this, p = this.options;
  80. g.data = p.data;
  81. g.inputText = null;
  82. g.select = null;
  83. g.textFieldID = "";
  84. g.valueFieldID = "";
  85. g.valueField = null; //隐藏域(保存值)
  86. //文本框初始化
  87. if (this.element.tagName.toLowerCase() == "input")
  88. {
  89. this.element.readOnly = true;
  90. g.inputText = $(this.element);
  91. g.textFieldID = this.element.id;
  92. }
  93. else if (this.element.tagName.toLowerCase() == "select")
  94. {
  95. $(this.element).hide();
  96. g.select = $(this.element);
  97. p.isMultiSelect = false;
  98. p.isShowCheckBox = false;
  99. g.textFieldID = this.element.id + "_txt";
  100. g.inputText = $('<input type="text" readonly="true"/>');
  101. g.inputText.attr("id", g.textFieldID).insertAfter($(this.element));
  102. } else
  103. {
  104. //不支持其他类型
  105. return;
  106. }
  107. if (g.inputText[0].name == undefined) g.inputText[0].name = g.textFieldID;
  108. //隐藏域初始化
  109. g.valueField = null;
  110. if (p.valueFieldID)
  111. {
  112. try{
  113. g.valueField = $("#" + p.valueFieldID + ":input");
  114. }catch (e) {
  115. g.valueField=[];
  116. }
  117. if (g.valueField.length == 0) g.valueField = $('<input type="hidden"/>');
  118. g.valueField[0].id = g.valueField[0].name = p.valueFieldID;
  119. }
  120. else
  121. {
  122. g.valueField = $('<input type="hidden"/>');
  123. g.valueField[0].id = g.valueField[0].name = g.textFieldID + "_val";
  124. }
  125. if (g.valueField[0].name == undefined) g.valueField[0].name = g.valueField[0].id;
  126. //开关
  127. g.link = $('<div class="l-trigger"><div class="l-trigger-icon"></div></div>');
  128. //下拉框
  129. g.selectBox = $('<div class="l-box-select"><div class="l-box-select-inner"><table cellpadding="0" cellspacing="0" border="0" class="l-box-select-table"></table></div></div>');
  130. g.selectBox.table = $("table:first", g.selectBox);
  131. //外层
  132. g.wrapper = g.inputText.wrap('<div class="l-text l-text-combobox"></div>').parent();
  133. g.wrapper.append('<div class="l-text-l"></div><div class="l-text-r"></div>');
  134. g.wrapper.append(g.link);
  135. //添加个包裹,
  136. g.textwrapper = g.wrapper.wrap('<div class="l-text-wrapper"></div>').parent();
  137. if (p.absolute)
  138. g.selectBox.appendTo('body').addClass("l-box-select-absolute");
  139. else
  140. g.textwrapper.append(g.selectBox);
  141. g.textwrapper.append(g.valueField);
  142. g.inputText.addClass("l-text-field");
  143. if (p.isShowCheckBox && !g.select)
  144. {
  145. $("table", g.selectBox).addClass("l-table-checkbox");
  146. } else
  147. {
  148. p.isShowCheckBox = false;
  149. $("table", g.selectBox).addClass("l-table-nocheckbox");
  150. }
  151. //开关 事件
  152. g.link.hover(function ()
  153. {
  154. if (p.disabled) return;
  155. this.className = "l-trigger-hover";
  156. }, function ()
  157. {
  158. if (p.disabled) return;
  159. this.className = "l-trigger";
  160. }).mousedown(function ()
  161. {
  162. if (p.disabled) return;
  163. this.className = "l-trigger-pressed";
  164. }).mouseup(function ()
  165. {
  166. if (p.disabled) return;
  167. this.className = "l-trigger-hover";
  168. }).click(function ()
  169. {
  170. if (p.disabled) return;
  171. if (g.trigger('beforeOpen') == false) return false;
  172. g._toggleSelectBox(g.selectBox.is(":visible"));
  173. });
  174. g.inputText.click(function ()
  175. {
  176. if (p.disabled) return;
  177. if (g.trigger('beforeOpen') == false) return false;
  178. g._toggleSelectBox(g.selectBox.is(":visible"));
  179. }).blur(function ()
  180. {
  181. if (p.disabled) return;
  182. g.wrapper.removeClass("l-text-focus");
  183. }).focus(function ()
  184. {
  185. if (p.disabled) return;
  186. g.wrapper.addClass("l-text-focus");
  187. }).focusout(function(){
  188. g._toggleSelectBox(true);
  189. });
  190. g.wrapper.hover(function ()
  191. {
  192. if (p.disabled) return;
  193. g.wrapper.addClass("l-text-over");
  194. }, function ()
  195. {
  196. if (p.disabled) return;
  197. g.wrapper.removeClass("l-text-over");
  198. });
  199. g.resizing = false;
  200. g.selectBox.hover(
  201. function(){
  202. g.inputText.unbind("focusout");
  203. },
  204. function(){
  205. g.inputText.focusout(function(){
  206. g._toggleSelectBox(true);
  207. });
  208. });
  209. var itemsleng = $("tr", g.selectBox.table).length;
  210. if (!p.selectBoxHeight && itemsleng < 8) p.selectBoxHeight = itemsleng * 30;
  211. if (p.selectBoxHeight)
  212. {
  213. g.selectBox.height(p.selectBoxHeight);
  214. }
  215. else if(g.data!=null && g.data.length<5){
  216. g.selectBox.css('height', 'auto');
  217. }
  218. //下拉框内容初始化
  219. g.bulidContent();
  220. if(typeof p.height=="undefined"){
  221. p.height=23;
  222. }
  223. g.set(p);
  224. //下拉框宽度、高度初始化
  225. if (p.selectBoxWidth)
  226. {
  227. g.selectBox.width(p.selectBoxWidth);
  228. }
  229. else
  230. {
  231. p.selectBoxWidth =g.wrapper.css('width');
  232. g.selectBox.css('width', p.selectBoxWidth);
  233. }
  234. g.createIframe(g.selectBox);
  235. },
  236. destroy: function ()
  237. {
  238. if (this.wrapper) this.wrapper.remove();
  239. if (this.selectBox) this.selectBox.remove();
  240. this.options = null;
  241. $.ligerui.remove(this);
  242. },
  243. _setDisabled: function (value)
  244. {
  245. //禁用样式
  246. if (value)
  247. {
  248. this.wrapper.addClass('l-text-disabled');
  249. } else
  250. {
  251. this.wrapper.removeClass('l-text-disabled');
  252. }
  253. },
  254. _setLable: function (label)
  255. {
  256. var g = this, p = this.options;
  257. if (label)
  258. {
  259. if (g.labelwrapper)
  260. {
  261. g.labelwrapper.find(".l-text-label:first").html(label + ':&nbsp');
  262. }
  263. else
  264. {
  265. g.labelwrapper = g.textwrapper.wrap('<div class="l-labeltext"></div>').parent();
  266. g.labelwrapper.prepend('<div class="l-text-label" style="float:left;display:inline;">' + label + ':&nbsp</div>');
  267. g.textwrapper.css('float', 'left');
  268. }
  269. if (!p.labelWidth)
  270. {
  271. p.labelWidth = $('.l-text-label', g.labelwrapper).outerWidth();
  272. }
  273. else
  274. {
  275. $('.l-text-label', g.labelwrapper).outerWidth(p.labelWidth);
  276. }
  277. $('.l-text-label', g.labelwrapper).width(p.labelWidth);
  278. $('.l-text-label', g.labelwrapper).height(g.wrapper.height());
  279. g.labelwrapper.append('<br style="clear:both;" />');
  280. if (p.labelAlign)
  281. {
  282. $('.l-text-label', g.labelwrapper).css('text-align', p.labelAlign);
  283. }
  284. g.textwrapper.css({ display: 'inline' });
  285. g.labelwrapper.width(g.wrapper.outerWidth() + p.labelWidth + 2);
  286. }
  287. },
  288. createIframe:function(selectBox){
  289. var p = this.options;
  290. var iframeObj=$('<iframe frameborder="0" class="l_selectBox_frame" style="position:absolute;z-index:1;display:none;"></iframe>');
  291. iframeObj.css({left:selectBox.left,top:selectBox.top,width:selectBox.width()+2,height:p.selectBoxWidth})
  292. iframeObj.attr("iframeId","selectBoxId");
  293. iframeObj.appendTo('body');
  294. },
  295. hideIframe:function(selectBox){
  296. $("iframe.l_selectBox_frame[iframeId='selectBoxId']").hide();
  297. },
  298. isIframeVisible:function(){
  299. var iframe_obj = $("iframe.l_selectBox_frame[iframeId='selectBoxId']");
  300. return iframe_obj.is(":visible");
  301. },
  302. showIframe:function(selectBox){
  303. var p = this.options;
  304. var obj=$("iframe.l_selectBox_frame[iframeId='selectBoxId']");
  305. obj.show();
  306. obj.css({ top: selectBox.css("top"), left: selectBox.css("left") , width: selectBox.width()+2,height:p.selectBoxWidth });
  307. this.inputText.focus();
  308. },
  309. _setWidth: function (value)
  310. {
  311. var g = this;
  312. if (value > 20)
  313. {
  314. g.wrapper.css({ width: value });
  315. g.inputText.css({ width: value - 20 });
  316. g.selectBox.css('width', value);
  317. g.textwrapper.css({ width: value });
  318. }
  319. },
  320. _setHeight: function (value)
  321. {
  322. var g = this;
  323. if (value > 10)
  324. {
  325. g.wrapper.height(value);
  326. g.inputText.height(value - 4);
  327. g.link.height(value - 4);
  328. g.textwrapper.css({ width: value });
  329. }
  330. },
  331. _setResize: function (resize)
  332. {
  333. //调整大小支持
  334. if (resize && $.fn.ligerResizable)
  335. {
  336. var g = this;
  337. g.selectBox.ligerResizable({ handles: 'se,s,e', onStartResize: function ()
  338. {
  339. g.resizing = true;
  340. g.trigger('startResize');
  341. }
  342. , onEndResize: function ()
  343. {
  344. g.resizing = false;
  345. if (g.trigger('endResize') == false)
  346. return false;
  347. }
  348. });
  349. g.selectBox.append("<div class='l-btn-nw-drop'></div>");
  350. }
  351. },
  352. //查找Text,适用多选和单选
  353. findTextByValue: function (value)
  354. {
  355. var g = this, p = this.options;
  356. if (value == undefined) return "";
  357. var texts = "";
  358. var contain = function (checkvalue)
  359. {
  360. var targetdata = value.toString().split(p.split);
  361. for (var i = 0; i < targetdata.length; i++)
  362. {
  363. if (targetdata[i] == checkvalue) return true;
  364. }
  365. return false;
  366. };
  367. $(g.data).each(function (i, item)
  368. {
  369. var val = item[p.valueField];
  370. var txt = item[p.textField];
  371. if (contain(val))
  372. {
  373. texts += txt + p.split;
  374. }
  375. });
  376. if (texts.length > 0) texts = texts.substr(0, texts.length - 1);
  377. return texts;
  378. },
  379. //查找Value,适用多选和单选
  380. findValueByText: function (text)
  381. {
  382. var g = this, p = this.options;
  383. if (!text && text == "") return "";
  384. var contain = function (checkvalue)
  385. {
  386. var targetdata = text.toString().split(p.split);
  387. for (var i = 0; i < targetdata.length; i++)
  388. {
  389. if (targetdata[i] == checkvalue) return true;
  390. }
  391. return false;
  392. };
  393. var values = "";
  394. $(g.data).each(function (i, item)
  395. {
  396. var val = item[p.valueField];
  397. var txt = item[p.textField];
  398. if (contain(txt))
  399. {
  400. values += val + p.split;
  401. }
  402. });
  403. if (values.length > 0) values = values.substr(0, values.length - 1);
  404. return values;
  405. },
  406. removeItem: function ()
  407. {
  408. },
  409. insertItem: function ()
  410. {
  411. },
  412. addItem: function ()
  413. {
  414. },
  415. _setValue: function (value)
  416. {
  417. var g = this, p = this.options;
  418. var text = g.findTextByValue(value);
  419. if (p.tree)
  420. {
  421. g.selectValueByTree(value);
  422. }
  423. else if (!p.isMultiSelect)
  424. {
  425. g._changeValue(value, text);
  426. $("tr[value=" + value + "] td", g.selectBox).addClass("l-selected");
  427. $("tr[value!=" + value + "] td", g.selectBox).removeClass("l-selected");
  428. }
  429. else
  430. {
  431. g._changeValue(value, text);
  432. var targetdata = value.toString().split(p.split);
  433. $("table.l-table-checkbox :checkbox", g.selectBox).each(function () { this.checked = false; });
  434. for (var i = 0; i < targetdata.length; i++)
  435. {
  436. $("table.l-table-checkbox tr[value=" + targetdata[i] + "] :checkbox", g.selectBox).each(function () { this.checked = true; });
  437. }
  438. }
  439. },
  440. selectValue: function (value)
  441. {
  442. this._setValue(value);
  443. },
  444. bulidContent: function ()
  445. {
  446. var g = this, p = this.options;
  447. this.clearContent();
  448. if (g.select)
  449. {
  450. g.setSelect();
  451. }
  452. else if (g.data)
  453. {
  454. g.setData(g.data);
  455. }
  456. else if (p.tree)
  457. {
  458. g.setTree(p.tree);
  459. }
  460. else if (p.grid)
  461. {
  462. g.setGrid(p.grid);
  463. }
  464. else if (p.url)
  465. {
  466. $.ajax({
  467. type: 'post',
  468. url: p.url,
  469. cache: false,
  470. dataType: 'json',
  471. success: function (data)
  472. {
  473. g.data = data;
  474. g.setData(g.data);
  475. g.trigger('success', [g.data]);
  476. },
  477. error: function (XMLHttpRequest, textStatus)
  478. {
  479. g.trigger('error', [XMLHttpRequest, textStatus]);
  480. }
  481. });
  482. }
  483. },
  484. clearContent: function ()
  485. {
  486. var g = this, p = this.options;
  487. $("table", g.selectBox).html("");
  488. //g.inputText.val("");
  489. //g.valueField.val("");
  490. },
  491. setSelect: function ()
  492. {
  493. var g = this, p = this.options;
  494. this.clearContent();
  495. $('option', g.select).each(function (i)
  496. {
  497. var val = $(this).val();
  498. var txt = $(this).html();
  499. var tr = $("<tr><td index='" + i + "' value='" + val + "'>" + txt + "</td>");
  500. $("table.l-table-nocheckbox", g.selectBox).append(tr);
  501. $("td", tr).hover(function ()
  502. {
  503. $(this).addClass("l-over");
  504. }, function ()
  505. {
  506. $(this).removeClass("l-over");
  507. });
  508. });
  509. $('td:eq(' + g.select[0].selectedIndex + ')', g.selectBox).each(function ()
  510. {
  511. if ($(this).hasClass("l-selected"))
  512. {
  513. g.selectBox.hide();
  514. return;
  515. }
  516. $(".l-selected", g.selectBox).removeClass("l-selected");
  517. $(this).addClass("l-selected");
  518. if (g.select[0].selectedIndex != $(this).attr('index') && g.select[0].onchange)
  519. {
  520. g.select[0].selectedIndex = $(this).attr('index'); g.select[0].onchange();
  521. }
  522. var newIndex = parseInt($(this).attr('index'));
  523. g.select[0].selectedIndex = newIndex;
  524. g.select.trigger("change");
  525. g.selectBox.hide();
  526. var value = $(this).attr("value");
  527. var text = $(this).html();
  528. if (p.render)
  529. {
  530. g.inputText.val(p.render(value, text));
  531. }
  532. else
  533. {
  534. g.inputText.val(text);
  535. }
  536. });
  537. g._addClickEven();
  538. },
  539. setData: function (data)
  540. {
  541. var g = this, p = this.options;
  542. this.clearContent();
  543. if (!data || !data.length) return;
  544. if (g.data != data) g.data = data;
  545. if (p.columns)
  546. {
  547. g.selectBox.table.headrow = $("<tr class='l-table-headerow'><td width='18px'></td></tr>");
  548. g.selectBox.table.append(g.selectBox.table.headrow);
  549. g.selectBox.table.addClass("l-box-select-grid");
  550. for (var j = 0; j < p.columns.length; j++)
  551. {
  552. var headrow = $("<td columnindex='" + j + "' columnname='" + p.columns[j].name + "'>" + p.columns[j].header + "</td>");
  553. if (p.columns[j].width)
  554. {
  555. headrow.width(p.columns[j].width);
  556. }
  557. g.selectBox.table.headrow.append(headrow);
  558. }
  559. }
  560. for (var i = 0; i < data.length; i++)
  561. {
  562. var val = data[i][p.valueField];
  563. var txt = data[i][p.textField];
  564. if (!p.columns)
  565. {
  566. $("table.l-table-checkbox", g.selectBox).append("<tr value='" + val + "'><td style='width:18px;' index='" + i + "' value='" + val + "' text='" + txt + "' ><input type='checkbox' /></td><td index='" + i + "' value='" + val + "' align='left'>" + txt + "</td>");
  567. $("table.l-table-nocheckbox", g.selectBox).append("<tr value='" + val + "'><td index='" + i + "' value='" + val + "' align='left'>" + txt + "</td>");
  568. } else
  569. {
  570. var tr = $("<tr value='" + val + "'><td style='width:18px;' index='" + i + "' value='" + val + "' text='" + txt + "' ><input type='checkbox' /></td></tr>");
  571. $("td", g.selectBox.table.headrow).each(function ()
  572. {
  573. var columnname = $(this).attr("columnname");
  574. if (columnname)
  575. {
  576. var td = $("<td>" + data[i][columnname] + "</td>");
  577. tr.append(td);
  578. }
  579. });
  580. g.selectBox.table.append(tr);
  581. }
  582. }
  583. //自定义复选框支持
  584. if (p.isShowCheckBox && $.fn.ligerCheckBox)
  585. {
  586. $("table input:checkbox", g.selectBox).ligerCheckBox();
  587. }
  588. $(".l-table-checkbox input:checkbox", g.selectBox).change(function ()
  589. {
  590. if (this.checked && g.hasBind('beforeSelect'))
  591. {
  592. var parentTD = null;
  593. if ($(this).parent().get(0).tagName.toLowerCase() == "div")
  594. {
  595. parentTD = $(this).parent().parent();
  596. } else
  597. {
  598. parentTD = $(this).parent();
  599. }
  600. if (parentTD != null && g.trigger('beforeSelect', [parentTD.attr("value"), parentTD.attr("text")]) == false)
  601. {
  602. g.selectBox.slideToggle("fast");
  603. return false;
  604. }
  605. }
  606. if (!p.isMultiSelect)
  607. {
  608. if (this.checked)
  609. {
  610. $("input:checked", g.selectBox).not(this).each(function ()
  611. {
  612. this.checked = false;
  613. $(".l-checkbox-checked", $(this).parent()).removeClass("l-checkbox-checked");
  614. });
  615. g.selectBox.slideToggle("fast");
  616. }
  617. }
  618. g._checkboxUpdateValue();
  619. });
  620. $("table.l-table-nocheckbox td", g.selectBox).hover(function ()
  621. {
  622. $(this).addClass("l-over");
  623. }, function ()
  624. {
  625. $(this).removeClass("l-over");
  626. });
  627. g._addClickEven();
  628. //选择项初始化
  629. g._dataInit();
  630. },
  631. //树
  632. setTree: function (tree)
  633. {
  634. var g = this, p = this.options;
  635. this.clearContent();
  636. g.selectBox.table.remove();
  637. var selectValue=tree.selectValue;
  638. var nameKey=tree.nameKey;
  639. var name=tree.data.key.name;
  640. //ztree start
  641. if(!tree.callback) {
  642. tree.callback = {};
  643. }
  644. //允许复选框
  645. if(tree.check && tree.check.enable) {
  646. var onCheck = function(event, treeId, treeNode) {
  647. var checkedNodes = g.ztree.getCheckedNodes(true);
  648. var value = [], text = [];
  649. $(checkedNodes).each(function(i, node) {
  650. if (p.treeLeafOnly && node.isParent) return;
  651. value.push(node[p.valueField]);
  652. text.push(node[p.textField]);
  653. });
  654. g._changeValue(value.join(p.split), text.join(p.split));
  655. };
  656. var tonCheck = tree.callback.onCheck;
  657. tree.callback.onCheck = function(event, treeId, treeNode) {
  658. tonCheck && tonCheck(event, treeId, treeNode);
  659. onCheck(event, treeId, treeNode);
  660. };
  661. }
  662. //没有复选框。
  663. else {
  664. var onClick = function(event, treeId, treeNode) {
  665. var selectedNodes = g.ztree.getSelectedNodes();
  666. var value = [], text = [];
  667. $(selectedNodes).each(function(i, node) {
  668. if (p.treeLeafOnly && node.isParent) return;
  669. value.push(node[p.valueField]);
  670. text.push(node[p.textField]);
  671. });
  672. g._changeValue(value.join(p.split), text.join(p.split));
  673. };
  674. //外部传入点击事件
  675. var tonClick = tree.callback.onClick;
  676. tree.callback.onClick = function(event, treeId, treeNode) {
  677. //外部点击事件不为空即执行。
  678. tonClick && tonClick(event, treeId, treeNode);
  679. onClick(event, treeId, treeNode);
  680. };
  681. }
  682. //构建树
  683. g.tree = $("<ul id='ztree" + new Date().getTime() + "' class='ztree'></ul>");
  684. $("div:first", g.selectBox).append(g.tree);
  685. if(tree.data && tree.data.data) {
  686. g.ztree = $.fn.zTree.init(g.tree, tree, tree.data.data);
  687. }
  688. else {
  689. g.ztree = $.fn.zTree.init(g.tree, tree);
  690. }
  691. //默认选择对应项目。
  692. if(selectValue!=null && selectValue!=undefined && selectValue!=""){
  693. var aryValues=selectValue.split(",");
  694. var aryTxt=new Array();
  695. for(var i=0;i<aryValues.length;i++){
  696. var value=aryValues[i];
  697. var nodes = g.ztree.getNodesByParam(nameKey, value, null);
  698. if(nodes!=null && nodes.length>0){
  699. g.ztree.selectNode(nodes[0]);
  700. var txt=nodes[0][name];
  701. aryTxt.push(txt);
  702. if(tree.check){
  703. g.ztree.checkNode(nodes[0], true, false);
  704. }
  705. }
  706. }
  707. g._changeValue(selectValue, aryTxt.join(","));
  708. }
  709. //ztree end
  710. },
  711. selectValueByTree: function (value)
  712. {
  713. var g = this, p = this.options;
  714. if (value != null)
  715. {
  716. var text = "";
  717. var valuelist = value.toString().split(p.split);
  718. $(valuelist).each(function (i, item)
  719. {
  720. g.ztree.selectNode(item.toString());
  721. text += g.treeManager.getTextByID(item);
  722. if (i < valuelist.length - 1) text += p.split;
  723. });
  724. g._changeValue(value, text);
  725. }
  726. },
  727. //表格
  728. setGrid: function (grid)
  729. {
  730. var g = this, p = this.options;
  731. this.clearContent();
  732. g.selectBox.table.remove();
  733. g.grid = $("div:first", g.selectBox);
  734. grid.columnWidth = grid.columnWidth || 120;
  735. grid.width = "100%";
  736. grid.height = "100%";
  737. grid.heightDiff = -2;
  738. grid.InWindow = false;
  739. g.gridManager = g.grid.ligerGrid(grid);
  740. p.hideOnLoseFocus = false;
  741. if (grid.checkbox != false)
  742. {
  743. var onCheckRow = function ()
  744. {
  745. var rowsdata = g.gridManager.getCheckedRows();
  746. var value = [];
  747. var text = [];
  748. $(rowsdata).each(function (i, rowdata)
  749. {
  750. value.push(rowdata[p.valueField]);
  751. text.push(rowdata[p.textField]);
  752. });
  753. g._changeValue(value.join(p.split), text.join(p.split));
  754. };
  755. g.gridManager.bind('CheckAllRow', onCheckRow);
  756. g.gridManager.bind('CheckRow', onCheckRow);
  757. }
  758. else
  759. {
  760. g.gridManager.bind('SelectRow', function (rowdata, rowobj, index)
  761. {
  762. var value = rowdata[p.valueField];
  763. var text = rowdata[p.textField];
  764. g._changeValue(value, text);
  765. });
  766. g.gridManager.bind('UnSelectRow', function (rowdata, rowobj, index)
  767. {
  768. g._changeValue("", "");
  769. });
  770. }
  771. g.bind('show', function ()
  772. {
  773. if (g.gridManager)
  774. {
  775. g.gridManager._updateFrozenWidth();
  776. }
  777. });
  778. g.bind('endResize', function ()
  779. {
  780. if (g.gridManager)
  781. {
  782. g.gridManager._updateFrozenWidth();
  783. g.gridManager.setHeight(g.selectBox.height() - 2);
  784. }
  785. });
  786. },
  787. _getValue: function ()
  788. {
  789. return $(this.valueField).val();
  790. },
  791. getValue: function ()
  792. {
  793. //获取值
  794. return this._getValue();
  795. },
  796. updateStyle: function ()
  797. {
  798. var g = this, p = this.options;
  799. g._dataInit();
  800. },
  801. _dataInit: function ()
  802. {
  803. var g = this, p = this.options;
  804. var value = null;
  805. if (p.initValue != null && p.initText != null)
  806. {
  807. g._changeValue(p.initValue, p.initText);
  808. }
  809. //根据值来初始化
  810. if (p.initValue != null)
  811. {
  812. value = p.initValue;
  813. if (p.tree)
  814. {
  815. if(value)
  816. g.selectValueByTree(value);
  817. }
  818. else
  819. {
  820. var text = g.findTextByValue(value);
  821. g._changeValue(value, text);
  822. }
  823. }
  824. //根据文本来初始化
  825. else if (p.initText != null)
  826. {
  827. value = g.findValueByText(p.initText);
  828. g._changeValue(value, p.initText);
  829. }
  830. else if ( g.valueField.val() != "")
  831. {
  832. value = g.valueField.val();
  833. if (p.tree)
  834. {
  835. if(value)
  836. g.selectValueByTree(value);
  837. }
  838. else
  839. {
  840. var text = g.findTextByValue(value);
  841. g._changeValue(value, text);
  842. }
  843. }
  844. if (!p.isShowCheckBox && value != null)
  845. {
  846. $("table tr", g.selectBox).find("td:first").each(function ()
  847. {
  848. if (value == $(this).attr("value"))
  849. {
  850. $(this).addClass("l-selected");
  851. }
  852. });
  853. }
  854. if (p.isShowCheckBox && value != null)
  855. {
  856. $(":checkbox", g.selectBox).each(function ()
  857. {
  858. var parentTD = null;
  859. var checkbox = $(this);
  860. if (checkbox.parent().get(0).tagName.toLowerCase() == "div")
  861. {
  862. parentTD = checkbox.parent().parent();
  863. } else
  864. {
  865. parentTD = checkbox.parent();
  866. }
  867. if (parentTD == null) return;
  868. var valuearr = value.toString().split(p.split);
  869. $(valuearr).each(function (i, item)
  870. {
  871. if (item == parentTD.attr("value"))
  872. {
  873. $(".l-checkbox", parentTD).addClass("l-checkbox-checked");
  874. checkbox[0].checked = true;
  875. }
  876. });
  877. });
  878. }
  879. },
  880. //设置值到 文本框和隐藏域
  881. _changeValue: function (newValue, newText)
  882. {
  883. var g = this, p = this.options;
  884. if(g.valueField){
  885. g.valueField.val(newValue);
  886. }
  887. if (p.render)
  888. {
  889. g.inputText.val(p.render(newValue, newText));
  890. }
  891. else
  892. {
  893. g.inputText.val(newText);
  894. }
  895. g.selectedValue = newValue;
  896. g.selectedText = newText;
  897. g.inputText.trigger("change").focus();
  898. g.trigger('selected', [newValue, newText]);
  899. },
  900. //更新选中的值(复选框)
  901. _checkboxUpdateValue: function ()
  902. {
  903. var g = this, p = this.options;
  904. var valueStr = "";
  905. var textStr = "";
  906. $("input:checked", g.selectBox).each(function ()
  907. {
  908. var parentTD = null;
  909. if ($(this).parent().get(0).tagName.toLowerCase() == "div")
  910. {
  911. parentTD = $(this).parent().parent();
  912. } else
  913. {
  914. parentTD = $(this).parent();
  915. }
  916. if (!parentTD) return;
  917. valueStr += parentTD.attr("value") + p.split;
  918. textStr += parentTD.attr("text") + p.split;
  919. });
  920. if (valueStr.length > 0) valueStr = valueStr.substr(0, valueStr.length - 1);
  921. if (textStr.length > 0) textStr = textStr.substr(0, textStr.length - 1);
  922. g._changeValue(valueStr, textStr);
  923. },
  924. _addClickEven: function ()
  925. {
  926. var g = this, p = this.options;
  927. //选项点击
  928. $(".l-table-nocheckbox td", g.selectBox).click(function ()
  929. {
  930. var value = $(this).attr("value");
  931. var index = parseInt($(this).attr('index'));
  932. var text = $(this).html();
  933. if (g.hasBind('beforeSelect') && g.trigger('beforeSelect', [value, text]) == false)
  934. {
  935. if (p.slide) g.selectBox.slideToggle("fast");
  936. else g.selectBox.hide();
  937. return false;
  938. }
  939. if ($(this).hasClass("l-selected"))
  940. {
  941. if (p.slide) g.selectBox.slideToggle("fast");
  942. else g.selectBox.hide();
  943. return;
  944. }
  945. $(".l-selected", g.selectBox).removeClass("l-selected");
  946. $(this).addClass("l-selected");
  947. if (g.select)
  948. {
  949. if (g.select[0].selectedIndex != index)
  950. {
  951. g.select[0].selectedIndex = index;
  952. g.select.trigger("change");
  953. }
  954. }
  955. if (p.slide)
  956. {
  957. g.boxToggling = true;
  958. g.selectBox.hide("fast", function ()
  959. {
  960. g.boxToggling = false;
  961. })
  962. } else g.selectBox.hide();
  963. g._changeValue(value, text);
  964. });
  965. },
  966. updateSelectBoxPosition: function ()
  967. {
  968. var g = this, p = this.options;
  969. if (p.absolute)
  970. {
  971. g.selectBox.css({ left: g.wrapper.offset().left, top: g.wrapper.offset().top + 1 + g.wrapper.outerHeight() });
  972. }
  973. else
  974. {
  975. var topheight = g.wrapper.offset().top - $(window).scrollTop();
  976. var selfheight = g.selectBox.height() + textHeight + 4;
  977. if (topheight + selfheight > $(window).height() && topheight > selfheight)
  978. {
  979. g.selectBox.css("marginTop", -1 * (g.selectBox.height() + textHeight + 5));
  980. }
  981. }
  982. },
  983. _toggleSelectBox: function (isHide)
  984. {
  985. var g = this, p = this.options;
  986. if(isHide && !g.isIframeVisible()){
  987. return;
  988. }
  989. if(!(g.selectBox.is(":visible"))&&isHide){
  990. if(g.isIframeVisible()){
  991. g.hideIframe(g.selectBox);
  992. }
  993. return;
  994. }
  995. var textHeight = g.wrapper.height();
  996. g.boxToggling = true;
  997. if (isHide)
  998. {
  999. if (p.slide)
  1000. {
  1001. g.selectBox.slideToggle('fast', function ()
  1002. {
  1003. g.boxToggling = false;
  1004. });
  1005. }
  1006. else
  1007. {
  1008. g.selectBox.hide();
  1009. g.boxToggling = false;
  1010. }
  1011. }
  1012. else
  1013. {
  1014. g.updateSelectBoxPosition();
  1015. if (p.slide)
  1016. {
  1017. g.selectBox.slideToggle('fast', function ()
  1018. {
  1019. g.boxToggling = false;
  1020. if (!p.isShowCheckBox && $('td.l-selected', g.selectBox).length > 0)
  1021. {
  1022. var offSet = ($('td.l-selected', g.selectBox).offset().top - g.selectBox.offset().top);
  1023. $(".l-box-select-inner", g.selectBox).animate({ scrollTop: offSet });
  1024. }
  1025. });
  1026. }
  1027. else
  1028. {
  1029. g.selectBox.show();
  1030. g.boxToggling = false;
  1031. if (!g.tree && !g.grid && !p.isShowCheckBox && $('td.l-selected', g.selectBox).length > 0)
  1032. {
  1033. var offSet = ($('td.l-selected', g.selectBox).offset().top - g.selectBox.offset().top);
  1034. $(".l-box-select-inner", g.selectBox).animate({ scrollTop: offSet });
  1035. }
  1036. }
  1037. }
  1038. g.isShowed = g.selectBox.is(":visible");
  1039. g.trigger('toggle', [isHide]);
  1040. g.trigger(isHide ? 'hide' : 'show');
  1041. isHide ?g.hideIframe(g.selectBox):
  1042. g.showIframe(g.selectBox);
  1043. }
  1044. });
  1045. $.ligerui.controls.ComboBox.prototype.setValue = $.ligerui.controls.ComboBox.prototype.selectValue;
  1046. //设置文本框和隐藏控件的值
  1047. $.ligerui.controls.ComboBox.prototype.setInputValue = $.ligerui.controls.ComboBox.prototype._changeValue;
  1048. })(jQuery);