jquery-bootstigger.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. /**
  2. bootsform
  3. */
  4. (function ($) {
  5. function bootstigger(element, options){
  6. var obj = element;
  7. var can = options;
  8. var rand = can.rand;
  9. var me = this;
  10. //初始化
  11. this.init = function(){
  12. this.mainidss = 'main_'+rand+'';
  13. if(can.namedisplay=='')can.namedisplay=''+can.name+'_text';
  14. var s = '<div class="input-group">';
  15. s += ' <input readonly class="form-control form-select" name="'+can.namedisplay+'" placeholder="'+can.placeholder+'" id="display_'+rand+'">';
  16. s += ' <input type="hidden" id="value_'+rand+'" name="'+can.name+'" >';
  17. s += ' <span class="input-group-btn">';
  18. if(can.clearbool){
  19. s += ' <button class="btn btn-default" id="downclear_'+rand+'" type="button"><i class="icon-remove"></i></button>';
  20. }
  21. s += ' <button class="btn btn-default" id="down_'+rand+'" type="button"><i class="icon-caret-down"></i></button>';
  22. s += ' </span>';
  23. s += '</div>';
  24. var s1 = '<div id="div_'+rand+'" style="position:relative;">'+s+'</div>';
  25. obj.html(s1);
  26. $('#down_'+rand+'').click(function(){
  27. me._down(this);
  28. });
  29. if(can.clearbool){
  30. $('#downclear_'+rand+'').click(function(){
  31. me._downclear(this);
  32. });
  33. }
  34. this.setDefault(can.value, can.data);
  35. this._loadbool = false;
  36. this._fistload(0);//自动加载
  37. };
  38. this._down = function(o1){
  39. var o = $(o1);//
  40. if(!get(this.mainidss)){
  41. var s = '<div >';
  42. s += '<table width="100%"><tr>';
  43. s += ' <td><input id="keysou_'+rand+'" style="height:32px;line-height:20px;background:white;border:1px #cccccc solid;margin:5px;padding:3px;width:100%" ></td>';
  44. s += ' <td><button id="keysoubtn_'+rand+'" style="height:32px;background:white;border:1px #cccccc solid;padding:0px 10px" type="button"><i class="icon-search"></i></button></td>';
  45. s += ' </tr></table>';
  46. s += '</div>';
  47. var w = can.width;
  48. if(w==0)w = obj.width()-2;
  49. var s1 = '<div id="'+this.mainidss+'" style="position:absolute;z-index:120;background:white;left:1px;top:33px;padding:0px;width:'+w+'px;border:1px #dddddd solid;box-shadow:0 0 5px rgba(0, 0, 0, 0.3);display:none">';
  50. s1+=s;
  51. s1+='<div id="list_'+rand+'" class="select-list" style="overflow-y:auto"></div>';
  52. s1+='</div>';
  53. $('#div_'+rand+'').append(s1);
  54. this._showdata(can.data);
  55. js.addbody(rand, 'hide', this.mainidss);
  56. if(!this._loadbool)this._fistload(1);
  57. $('#keysou_'+rand+'').keyup(function(e){
  58. me._soukeysss(this, e);
  59. return false;
  60. });
  61. $('#keysoubtn_'+rand+'').click(function(){
  62. me._soukeybtn(this);
  63. return false;
  64. });
  65. }
  66. $('#'+this.mainidss+'').toggle();
  67. if(get(this.mainidss).style.display!='none'){
  68. get('keysou_'+rand+'').focus();
  69. this._setselcol();
  70. this._showeizhi();
  71. }
  72. };
  73. this._showdata = function(a){
  74. var s = '',i,val1,s1,len = a.length;
  75. this.nowdata = a;
  76. for(i=0; i<len && i<can.maxlist; i++){
  77. val1 = a[i][can.valuefields];
  78. s+= '<div oi="'+i+'" val="'+val1+'" class="div01">';
  79. if(can.checked){
  80. s+='<input type="checkbox" val="'+val1+'" name="checkbox_'+rand+'" value="'+i+'"> ';
  81. }
  82. s1= can.renderer(a[i], this);
  83. if(!s1){
  84. s+= a[i][can.displayfields];
  85. }else{
  86. s+= s1;
  87. }
  88. s+= '</div>';
  89. }
  90. var o = $('#list_'+rand+'');
  91. o.html(s);
  92. o.find("div.div01").click(function(){
  93. me._itemsclick(this);
  94. });
  95. if(can.checked){
  96. o.find("input[type='checkbox']").click(function(){
  97. me._itemscheckclick(this);
  98. });
  99. }
  100. var h = can.height,h1 = i*can.listheight;
  101. if(h1>h)h1 = h;
  102. o.css('height',''+h1+'px');
  103. this._setselcol();
  104. };
  105. this._showeizhi= function(){
  106. var o,jg,t;
  107. o = $('#'+this.mainidss+'');
  108. jg = $('#div_'+rand+'').offset().top+o.height()-winHb()+10;
  109. t = 33;
  110. if(jg>0)t = 0-jg;
  111. o.css('top',''+t+'px');
  112. };
  113. this._setselcol= function(){
  114. var vals = this.getValue(),i,o1,val1;
  115. var o = $('#list_'+rand+'').find("div[val]");
  116. o.removeClass();
  117. o.addClass('div01');
  118. var o2 = $('#list_'+rand+'').find("input[type='checkbox']");
  119. o2.attr('checked', false);
  120. if(vals!=''){
  121. var a = vals.split(',');
  122. for(i=0; i<a.length; i++){
  123. o1 = $('#list_'+rand+'').find("div[val='"+a[i]+"']");
  124. o1.removeClass();
  125. o1.addClass('div02');
  126. } vals = ','+vals+',';
  127. for(i=0; i<o2.length; i++){
  128. o1 = o2[i];
  129. val1 = $(o1).attr('val');
  130. if(vals.indexOf(','+val1+',')>-1)o1.checked=true;
  131. }
  132. }
  133. };
  134. this._cenghide = function(){
  135. $('#'+this.mainidss+'').hide();
  136. };
  137. this._itemsclick = function(o1){
  138. if(can.checked)return;
  139. var o = $(o1);
  140. var oi = parseInt(o.attr('oi'));
  141. var d = this.nowdata[oi],
  142. nae = d[can.displayfields],
  143. val = d[can.valuefields];
  144. $('#display_'+rand+'').val(nae);
  145. $('#value_'+rand+'').val(val);
  146. $('#display_'+rand+'').focus();
  147. can.itemsclick(d, this, oi);
  148. this._cenghide();
  149. };
  150. this._itemscheckclick = function(o1){
  151. var s = js.getchecked('checkbox_'+rand+'');
  152. var nae='',val='',i,s1,d,oi;
  153. if(s!=''){
  154. s1 = s.split(',');
  155. for(i=0;i<s1.length;i++){
  156. oi = s1[i];
  157. d = this.nowdata[oi];
  158. nae+=','+d[can.displayfields];
  159. val+=','+d[can.valuefields];
  160. }
  161. }
  162. if(nae!=''){
  163. nae = nae.substr(1);
  164. val = val.substr(1);
  165. }
  166. $('#display_'+rand+'').val(nae);
  167. $('#value_'+rand+'').val(val);
  168. this._setselcol();
  169. };
  170. //设置默认值
  171. this.setDefault = function(vs1,a){
  172. var nae = can.display,
  173. val = vs1,
  174. i,d;
  175. var sval = ','+val+',',vslss,oi=0;
  176. for(i=0; i<a.length; i++){
  177. d = a[i];vslss = ','+d[can.valuefields]+',';
  178. if(sval.indexOf(vslss)>-1){
  179. if(!can.checked){
  180. nae = d[can.displayfields];
  181. break;
  182. }else{
  183. if(oi==0)nae='';
  184. nae+=','+d[can.displayfields];
  185. oi++;
  186. }
  187. }
  188. }
  189. if(nae.substr(0,1)==',')nae=nae.substr(1);
  190. $('#display_'+rand+'').val(nae);
  191. $('#value_'+rand+'').val(val);
  192. };
  193. this.getValue = function(){
  194. return $('#value_'+rand+'').val();
  195. };
  196. this.getRawValue = function(){
  197. return $('#display_'+rand+'').val();
  198. };
  199. this.setValue = function(val){
  200. this.setDefault(val, can.data);
  201. };
  202. this.setRawValue = function(v, v1){
  203. $('#display_'+rand+'').val(v);
  204. $('#value_'+rand+'').val(v1);
  205. };
  206. this._load = function(url){
  207. if(isempt(url))return;
  208. if(get('list_'+rand+'')){
  209. $('#list_'+rand+'').html('<div align="center" style="padding:20px"><img src="images/mloading.gif"></div>');
  210. }
  211. $.post(url,{key:$('#keysou_'+rand+'').val()},function(da){
  212. var a = js.decode(da);
  213. me._loadbool = true;
  214. me._loadback(a);
  215. });
  216. };
  217. //搜索
  218. this._soukeysss = function(o1, e){
  219. var code = e.keyCode;
  220. if(code==13){
  221. this._soukeybtn();
  222. }else{
  223. this._soukey();
  224. }
  225. //38 39 40 41
  226. //js.msg('msg',code)
  227. }
  228. this._soukey = function(){
  229. clearTimeout(this._soukeytime);
  230. this._soukeytime = setTimeout(function(){
  231. me._soukey1();
  232. },300);
  233. };
  234. this._soukey1 = function(){
  235. var d=[],i,bo,k,d1,
  236. val = strreplace($('#keysou_'+rand+'').val()),
  237. a = can.data;
  238. if(a.length<=0 || this._oldvalue==val)return;
  239. if(!isempt(val)){
  240. val = val.toLowerCase();
  241. for(i=0; i<a.length; i++){
  242. if(d.length>10)break;
  243. d1 = a[i];bo = false;
  244. for(k in d1){
  245. if(!isempt(d1[k])){
  246. if(d1[k].toLowerCase().indexOf(val)==0){
  247. bo = true;break;
  248. }};
  249. }
  250. if(bo)d.push(d1);
  251. }
  252. }else{
  253. d = a;
  254. }
  255. this._showdata(d);
  256. this._oldvalue = val;
  257. };
  258. this._soukeybtn = function(){
  259. if(can.url==''){
  260. this._soukey();
  261. }else{
  262. this._fistload(1);
  263. }
  264. };
  265. this._loadback = function(a){
  266. this.setData(a);
  267. };
  268. this._fistload = function(lx){
  269. if(!can.autoLoad && lx==0 )return;
  270. if(can.url=='')return;
  271. this._load(can.url);
  272. };
  273. this._downclear = function(){
  274. this.setValue('');
  275. $('#display_'+rand+'').focus();
  276. };
  277. this.reload = function(url){
  278. if(!url)url = can.url;
  279. this._load(can.url);
  280. };
  281. this.setData = function(a, naf, nafid){
  282. can.data = a;
  283. if(get('list_'+rand+'')){
  284. this._showdata(a);
  285. this.setValue(this.getValue());
  286. }
  287. if(naf)can.displayfields=naf;
  288. if(nafid)can.valuefields=nafid;
  289. };
  290. this.setDisabled = function(bo){
  291. get('down_'+rand+'').disabled = bo;
  292. get('display_'+rand+'').disabled = bo;
  293. if(can.clearbool)get('downclear_'+rand+'').disabled = bo;
  294. };
  295. this.hide = function(){
  296. obj.hide();
  297. };
  298. this.show = function(){
  299. obj.show();
  300. };
  301. this.setVisible=function(bo){
  302. if(bo){
  303. this.show();
  304. }else{
  305. this.hide();
  306. }
  307. };
  308. };
  309. $.fn.bootstigger = function(options){
  310. var defaultVal = {
  311. items:[],rand:js.getrand(),name:'',namedisplay:'',data:[],
  312. displayfields:'name',valuefields:'name',
  313. renderer:function(){return ''},listheight:38,
  314. itemsclick:function(){},height:300,width:0,placeholder:'',
  315. maxlist:1000,//最多列表数
  316. checked:false,
  317. clearbool:false,
  318. value:'',display:'',
  319. autoLoad:false,url:'',load:function(){}
  320. };
  321. var can = $.extend({}, defaultVal, options);
  322. clsa = new bootstigger($(this), can);
  323. clsa.init();
  324. return clsa;
  325. };
  326. })(jQuery);