subform.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  1. $(function(){
  2. var subform={
  3. tables:{},
  4. memu:null,
  5. //初始化页面
  6. init:function(){
  7. //初始化select checkbox radio
  8. this.initMulValCtrl();
  9. var self=this;
  10. $("[type='subtable']").each(function(){
  11. var table=$(this);
  12. var formType=$(table).attr("formtype");
  13. //添加一行数据
  14. var row=$(table).find("[type='append']");
  15. //子表Id
  16. var tableId=$(table).attr('id');
  17. //弹框模式
  18. if(formType=="form"){
  19. isPage=false;
  20. var id=this.id+"Form",
  21. form=$("#"+id),
  22. width=form.attr('width')?form.attr('width'):form.width()+80,
  23. height=form.attr('height')?form.attr('height'):form.height()+70,
  24. title=form.attr('title')?form.attr('title'):'';
  25. $(table).data('form', '<form>' + $('<div></div>').append(form.clone()).html() + '</form>');
  26. $(table).data("formProperty",{title:title,width:width ,height: height});
  27. form.remove();
  28. }
  29. //页内编辑模式
  30. if(formType="page"){
  31. }
  32. $(this).data('row',$('<div></div>').append(row.clone()).html());
  33. self.addBind($(this));
  34. row.css('display', 'none').html('');
  35. self.tables[tableId]=$(table);
  36. //self.handButton($(this));
  37. });
  38. },
  39. /**
  40. * 处理页面多值的控件类型 如select checkbox radio,把字段信息放到那些组件的val属性中
  41. * eg:<select name="m:zxdmsckjcs:zbzdw" val="${zxdmsckjcs.zbzdw}"><option value="1">苹果</option> <option value="2">HTC</option> </select>
  42. */
  43. initMulValCtrl:function(){
  44. //处理select
  45. $("select[val]").each(function(){
  46. var data = $(this).attr("val");
  47. $(this).val(data);
  48. });
  49. //处理checkbox
  50. $("input[type=checkbox][val]").each(function(){
  51. var data = $(this).attr("val");
  52. var strs=data.split(",");//解释数据
  53. for(i=0;str=strs[i];i++){
  54. if(str==$(this).val()){//数据中有相等value
  55. $(this).attr("checked","true");
  56. }
  57. }
  58. });
  59. //处理radio
  60. $("input[type=radio][val]").each(function(){
  61. var data = $(this).attr("val");
  62. if(data==$(this).val()){
  63. $(this).attr("checked","true");
  64. }
  65. });
  66. },
  67. /**
  68. * 添加行数据的右键事件绑定。
  69. * @param row
  70. * @param table
  71. */
  72. addBind: function( table) {
  73. var self=this;
  74. //是否需要编辑菜单项目
  75. //如果该表弹出窗口定义,那么就不需要编辑菜单项目。
  76. var needEdit = (table.data('form') != null);
  77. var menu = self.getMenu(needEdit);
  78. $('[type="subdata"]').live("contextmenu", function(e) {
  79. menu.target = e.target;
  80. menu.show({top : e.pageY,left : e.pageX});
  81. return false;
  82. });
  83. $(".add",table).click(function(){
  84. self.add(table,null);
  85. });
  86. },
  87. //添加一行记录 包括 弹框 和 页内两种编辑模式
  88. add:function(table,row){
  89. var self=this, f=table.data("form");
  90. //弹框模式
  91. if(f){
  92. var form=$(f).clone(),formProperty = table.data("formProperty");
  93. $(form).find("table,div").show();
  94. var frm=$(form).form({errorPlacement:function(element, msg){
  95. $(element).parent().append($('<label class="initerror" >*</label>'));
  96. }});
  97. this.openWin({
  98. title:'添加'+formProperty.title,
  99. width:formProperty.width,
  100. height:formProperty.height,
  101. form:form,
  102. callback:function(){
  103. if(frm.valid()){
  104. var data=self.getFormData(form);
  105. var showData=self.getFormShowData(form);
  106. self.addRow(data,showData,table);
  107. }
  108. }
  109. });
  110. //页内编辑模式
  111. }else{
  112. self._addRow(table,row);
  113. }
  114. },
  115. // 弹框模式 根据表单数据 增加一行
  116. addRow:function(data,showData,table){
  117. var row=table.data('row');
  118. var tr=$(row).clone();
  119. tr.attr('type','subdata');
  120. tr.removeAttr('style');
  121. for(var name in data){
  122. tr.find("td,input[type='hidden']").each(function(){
  123. if($(this).is('td')){
  124. var tdname=$(this).attr('name');
  125. if(name==tdname){
  126. $(this).text(showData[name]);
  127. }
  128. }
  129. if($(this).is('input[type="hidden"]')){
  130. var inputname=$(this).attr('name');
  131. if(name==inputname){
  132. $(this).val(data[name]);
  133. }
  134. }
  135. });
  136. }
  137. var rows=table.find("[type='subdata']:visible");
  138. if(rows.length!=0){
  139. $(rows.get(rows.length-1)).after(tr);
  140. }else{
  141. $(table.find("tbody")[0]).append(tr);
  142. }
  143. //编号
  144. tr.find(".tdNo").text(rows.length+1);
  145. $.ligerDialog.hide();
  146. $.ligerDialog.close();
  147. },
  148. /**
  149. * 获取右键菜单。
  150. * @param needEdit
  151. * @returns
  152. */
  153. getMenu : function(needEdit) {
  154. var self=this;
  155. var menu;
  156. var items = [ {
  157. text : '在前面插入记录',
  158. click : function() {
  159. var row = $(menu.target).closest('[type="subdata"]');
  160. var table = row.closest('[type=subtable]');
  161. self.add(table, row);
  162. }
  163. }, {
  164. text : '在后面插入记录',
  165. click : function() {
  166. var row = $(menu.target).closest('[type="subdata"]');
  167. var table = row.closest('[type=subtable]');
  168. row = row.next('[type="subdata"]:visible');
  169. if (row.length == 0) {
  170. row = null;
  171. }
  172. self.add(table, row);
  173. }
  174. }, {
  175. line : true
  176. }, {
  177. text : '编辑',
  178. click : function() {
  179. var row = $(menu.target).closest('[type="subdata"]');
  180. var table = row.closest('[type=subtable]');
  181. self.edit(table, row);
  182. }
  183. }, {
  184. text : '删除此记录',
  185. click : function() {
  186. var t = $(menu.target).closest('[type="subdata"]'),
  187. brother = t.next('[type="subdata"]').length?t.next('[type="subdata"]'):t.prev('[type="subdata"]');
  188. t.remove();
  189. /*if(brother)
  190. FormUtil.InitMathfunction(brother);*/
  191. }
  192. }, {
  193. line : true
  194. }, {
  195. text : '向上移动',
  196. click : function() {
  197. var t = $(menu.target).closest('[type="subdata"]');
  198. var prev = t.prev('[type="subdata"]:visible');
  199. if (prev.length > 0) {
  200. prev.before(t);
  201. }
  202. }
  203. }, {
  204. text : '向下移动',
  205. click : function() {
  206. var t = $(menu.target).closest('[type="subdata"]');
  207. var next = t.next('[type="subdata"]:visible');
  208. if (next.length > 0) {
  209. next.after(t);
  210. }
  211. }
  212. } ];
  213. //如果不需要编辑,删除编辑菜单。
  214. if (!needEdit) {
  215. items.splice(3, 1);
  216. }
  217. menu = $.ligerMenu({top : 100,left : 100,width : 130,items : items});
  218. if (needEdit) {
  219. this.menuWithEdit = menu;
  220. }
  221. else{
  222. this.menu = menu;
  223. }
  224. return menu;
  225. },
  226. // 弹框模式 触发 编辑点击事件
  227. edit:function(table,row){
  228. var self=this, form=self.setFormData(row,table),formProperty = table.data("formProperty");
  229. $(form).find("table,div").show();
  230. this.openWin({
  231. title:'编辑'+formProperty.title,
  232. width:formProperty.width,
  233. height:formProperty.height,
  234. form:form,
  235. callback:function(){
  236. var frm=$(form).form();
  237. if(frm.valid()){
  238. self.editRow(row, form);
  239. }
  240. }
  241. });
  242. },
  243. //页内编辑模式 \块模式 添加一行
  244. _addRow:function (table,row){
  245. var appendRow=$(table.data('row')).clone();
  246. appendRow.attr('type','subdata');
  247. appendRow.removeAttr('style');
  248. if(row){
  249. row.before(appendRow);
  250. }else{
  251. var rows=table.find("[type='subdata']:visible");
  252. if(rows.length!=0){
  253. $(rows.get(rows.length-1)).after(appendRow);
  254. }else{
  255. if($(appendRow).is('div')){
  256. $(table).append(appendRow);
  257. }else{
  258. $($(table).find('tbody')).append(appendRow);
  259. }
  260. }
  261. try{
  262. //编号
  263. appendRow.find(".tdNo").text(rows.length+1);
  264. }catch(e){
  265. }
  266. }
  267. //初始化数据字典
  268. appendRow.find('.dicComboBox,.dicComboTree,.dicCombo').each(function() {
  269. $(this).htDicCombo();
  270. });
  271. //添加选择器
  272. appendRow.find('[ctlType="selector"]').each(function() {
  273. var type = $(this).attr('class');
  274. buildSelector($(this), type);
  275. });
  276. this.initSubQuery();
  277. },
  278. //初始化子表级联
  279. initSubQuery:function(){
  280. $("select[selectquery]",$("[type=subtable],[formtype='window']")).each(function(){
  281. var me = $(this);
  282. var selected=me.attr("selectqueryed");
  283. //selectqueryed标识这个子表是否已经执行过了change绑定,存在就是已经绑定了,不存在就是没用被绑定过
  284. if(selected)return true;
  285. var selectquery = me.attr("selectquery");
  286. if (!selectquery)
  287. return true;
  288. selectquery = selectquery.replaceAll("'", "\"");
  289. var queryJson = JSON2.parse(selectquery);
  290. var query = queryJson.query;
  291. for (var i = 0; i < query.length; i++) {
  292. var field;
  293. // isMain是true 就是绑定主表的字段
  294. if (query[i].isMain=="true") {
  295. field = $(".formTable [name$=':" + query[i].trigger + "']");
  296. } else {
  297. field = me.parents('table.listTable,[formtype="window"]').find("[name='" + query[i].trigger + "']");
  298. //添加新一个子表时,执行了多次绑定change事件,把之前的change事件都解绑
  299. field.unbind("change");
  300. }
  301. if (field != "")
  302. QueryUI.change(field, me, queryJson);
  303. }
  304. //添加一个属性,标识已经被绑定过,
  305. me.attr("selectqueryed","selectqueryed");
  306. QueryUI.getvalue(me, queryJson);
  307. });
  308. },
  309. //删除一行
  310. delRow:function(){
  311. $.ligerMessageBox.confirm('提示信息','确认删除吗?',function(rtn) {
  312. if(rtn) {
  313. $('.pk:checked').each(function(){
  314. $(this).closest('tr').remove();
  315. });
  316. }
  317. });
  318. },
  319. //弹框模式 根据表单数据 编辑对应的行数据
  320. editRow:function(obj,form){
  321. var self=this;
  322. var data=self.getFormData(form);
  323. var showData = self.getFormShowData(form);
  324. for(var name in data){
  325. $(obj).find("td,input[type='hidden']").each(function(){
  326. if($(this).is('td')){
  327. var tdname=$(this).attr('name');
  328. if(name==tdname){
  329. $(this).text(showData[name]);
  330. }
  331. }
  332. if($(this).is('input[type="hidden"]')){
  333. var inputname=$(this).attr('name');
  334. if(name==inputname){
  335. $(this).val(data[name]);
  336. }
  337. }
  338. });
  339. }
  340. $.ligerDialog.hide();
  341. $.ligerDialog.close();
  342. },
  343. /**
  344. * 打开操作数据窗口。
  345. * @param conf 窗口配置参数
  346. * <pre>
  347. * conf.title {string}(可选)窗口标题 默认‘编辑’
  348. * conf.width {number}(可选)窗口宽度 默认400
  349. * conf.height {number}(可选)窗口高度 默认250
  350. * conf.form {Object}当前窗口对象
  351. * conf.callback {Object}(必须) 回调函数
  352. * </pre>
  353. */
  354. openWin:function(conf){
  355. $.ligerDialog.open({
  356. width: conf.width?conf.width:400,
  357. height:conf.height?conf.height:250,
  358. title: conf.title?conf.title:'编辑',
  359. isResize:true,
  360. showMax : true,
  361. showToggle : true,
  362. onClose : true,
  363. target:conf.form,
  364. buttons: [{ text: '确定', onclick:function(item,dialog){
  365. conf.callback(item,dialog);
  366. }}]
  367. });
  368. },
  369. //回填数据至表单
  370. setFormData:function(obj,table){
  371. var form=$(table.data('form')).clone().show();
  372. var json={};
  373. //根据当前行 取得数据
  374. $("input[type='hidden']",obj).each(function(){
  375. var value=$(this).val().trim();
  376. var name=$(this).attr('name');
  377. json[name]=value;
  378. });
  379. for(var name in json){
  380. form.find('input:text,input[type="hidden"],textarea,select').each(function() {
  381. var attrname=$(this).attr('name');
  382. if(name==attrname){
  383. if($(this).is('select')){
  384. $(this).find('option').each(function(){
  385. if($(this).val()==json[name]){
  386. $(this).attr('selected','selected');
  387. }
  388. });
  389. }else{
  390. $(this).val(json[name]);
  391. }
  392. }
  393. });
  394. form.find('input:checkbox,input:radio').each(function(){
  395. var attrname=$(this).attr("name");
  396. var value = '';
  397. if(name==attrname){
  398. value=json[name];
  399. }
  400. var ary=value.split(',');
  401. $(this).find('[name='+name+']').each(function(){
  402. for(var i=0;i<ary.length;i++){
  403. var v=ary[i];
  404. if($(this).val()==v){
  405. $(this).attr("checked","checked");
  406. }
  407. }
  408. });
  409. });
  410. // 图片也要设置
  411. form.find('img').each(function(){
  412. var attrname=$(this).attr('name');
  413. if(name==attrname){
  414. $(this).attr("src",json[name]);
  415. }
  416. });
  417. }
  418. return form;
  419. },
  420. /**
  421. * 取得表单中的数据
  422. */
  423. getFormData:function(form){
  424. var data={};
  425. $(form).find('input:text,input[type="hidden"],textarea,select').each(function() {
  426. var name=$(this).attr('name');
  427. var value=$(this).val();
  428. data[name]=value;
  429. });
  430. $(form).find(":checkbox,:radio").each(function(){
  431. var name=$(this).attr('name');
  432. var value="";
  433. $(":checked[name="+name+"]").each(function(){
  434. if(value==""){
  435. value=$(this).val();
  436. }else{
  437. value+=","+$(this).val();
  438. }
  439. });
  440. data[name]=value;
  441. });
  442. // 图片也要拿值
  443. $(form).find('img').each(function() {
  444. var name=$(this).attr('name');
  445. var value=$(this).attr('src');
  446. data[name]=value;
  447. });
  448. return data;
  449. },
  450. /**
  451. * 取得表单中的展示的数据
  452. */
  453. getFormShowData:function(form){
  454. var data={};
  455. $(form).find('input:text,textarea').each(function() {
  456. var name=$(this).attr('name');
  457. var value=$(this).val();
  458. data[name]=value;
  459. });
  460. $(form).find('select').each(function() {
  461. var me = $(this);
  462. var name= me.attr('name');
  463. var value= me.find("option:selected").text();
  464. data[name]=value;
  465. });
  466. $(form).find(":checkbox,:radio").each(function(){
  467. var name=$(this).attr('name');
  468. var value="";
  469. $(":checked[name="+name+"]").each(function(){
  470. if(value==""){
  471. value=$(this).val();
  472. }else{
  473. value+=","+$(this).val();
  474. }
  475. });
  476. data[name]=value;
  477. });
  478. return data;
  479. }
  480. };
  481. subform.init();
  482. });