//表单设计 $.fn.frmDesign = function (options) { var $frmdesigh = $(this); if (!$frmdesigh.attr('id')) { return false; } var defaults = { controlDataJson: [], tablefiledJsonData: "", frmContent: "", Height: 572, url: "", param: "", isSystemTable: 0,//默认是不绑定数据表的 getData: function (isTest) { var postData = []; var j = 0; var _controlfieldHistory = {}; for (var i in options.controlDataJson) { var rowJson = options.controlDataJson[i]; if (rowJson.control_field == "" && isTest != true) { dialogTop("请输入字段Id", "error"); $("#app_layout_list").find('[data-value=' + i + ']').addClass('activeerror'); return false; } if (rowJson.control_label == "" && isTest != true) { dialogTop("请输入字段名称", "error"); $("#app_layout_list").find('[data-value=' + i + ']').addClass('activeerror'); return false; } if (isTest != true) { if (_controlfieldHistory[rowJson.control_field] != undefined) { dialogTop("字段Id有重复", "error"); return false; } _controlfieldHistory[rowJson.control_field] = "1"; } if (rowJson.control_item != undefined) { var controlitem = []; for (var j in rowJson.control_item) { controlitem.push(rowJson.control_item[j]); } rowJson.control_item = controlitem; } j++; postData.push(rowJson); } if (j == 0 && isTest != true) { dialogTop("不能是空表单", "error"); return false; } return postData; } }; var options = $.extend(defaults, options); var divhtml = '
'; divhtml += '
文本框
'; divhtml += '
文本区
'; divhtml += '
编辑器
'; divhtml += '
单选框
'; divhtml += '
多选框
'; divhtml += '
下拉框
'; divhtml += '
日期框
'; divhtml += '
图片
'; divhtml += '
附件
'; // divhtml += '
单位组织
'; // divhtml += '
数据字典
'; divhtml += '
'; divhtml += '
'; divhtml += '
'; divhtml += '
'; divhtml += '
'; divhtml += '
'; divhtml += '
'; divhtml += '
'; divhtml += '
'; $frmdesigh.html(divhtml); $frmdesigh.find(".app_body").height(options.Height); $frmdesigh.find(".field_option").height(options.Height - 14).css("right", -240); $frmdesigh.find(".guideareas").height(options.Height - 33); var item_field_value_width = $(window).width() - 558; //表单控件拖动 function formdesigner_move() { $("#move_item_list .item_row").draggable({ connectToSortable: "#app_layout_list", helper: "clone", revert: "invalid" }); $("#app_layout_list").sortable({ opacity: 0.4, delay: 300, cursor: 'move', placeholder: "ui-state-highlight", stop: function (event, ui) { var random_id = String(Math.random()).substr(2); var $item_control = null; var $this_place = $(ui.item[0]); var controltype = $this_place.find('i').attr('id'); var controlrowJson = {}; controlrowJson["control_type"] = controltype; if (!!controltype) { switch (controltype) { case "text": $item_control = $('
文本框
文本框
'); controlrowJson["control_label"] = "文本框"; controlrowJson["control_field"] = ""; controlrowJson["control_verify"] = ""; controlrowJson["control_default"] = ""; controlrowJson["control_required"] = "0"; //controlrowJson["control_only"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "textarea": $item_control = $('
文本区
文本区
'); controlrowJson["control_label"] = "文本区"; controlrowJson["control_field"] = ""; controlrowJson["control_verify"] = ""; controlrowJson["control_height"] = "100px"; controlrowJson["control_default"] = ""; controlrowJson["control_required"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "texteditor": $item_control = $('
编辑器
编辑器
'); controlrowJson["control_label"] = "编辑器"; controlrowJson["control_field"] = ""; controlrowJson["control_verify"] = ""; controlrowJson["control_height"] = "200px"; controlrowJson["control_default"] = ""; controlrowJson["control_required"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "radio": $item_control = $('
单选项
单选项/未添加选项
'); controlrowJson["control_label"] = "单选项"; controlrowJson["control_field"] = ""; controlrowJson["control_item"] = []; controlrowJson["control_required"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "checkbox": $item_control = $('
多选项
多选项/未添加选项
'); controlrowJson["control_label"] = "多选项"; controlrowJson["control_field"] = ""; controlrowJson["control_item"] = []; controlrowJson["control_required"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "select": $item_control = $('
下拉框
下拉框/未添加选项
'); controlrowJson["control_label"] = "下拉框"; controlrowJson["control_field"] = ""; controlrowJson["control_item"] = []; controlrowJson["control_required"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "datetime": $item_control = $('
日期框
年-月-日
'); controlrowJson["control_label"] = "日期框"; controlrowJson["control_field"] = ""; controlrowJson["control_dateformat"] = "date"; controlrowJson["control_default"] = ""; controlrowJson["control_required"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "image": $item_control = $('
上传图片
上传图片/jpg,gif,png,bmp
'); controlrowJson["control_label"] = "上传图片"; controlrowJson["control_field"] = ""; controlrowJson["control_fileformat"] = "jpg,gif,png,bmp"; controlrowJson["control_required"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "upload": $item_control = $('
上传文件
上传文件/doc,xls,ppt,pdf
'); controlrowJson["control_label"] = "上传文件"; controlrowJson["control_field"] = ""; controlrowJson["control_fileformat"] = "doc,xls,ppt,pdf"; controlrowJson["control_required"] = "0"; options.controlDataJson[random_id] = controlrowJson; break; case "departmentlist": break; case "dataitemlist": break; default: break; } if ($item_control) { $this_place.html($item_control); $this_place.find('.item_field_value').width(item_field_value_width); $this_place.attr('data-value', random_id) item_rowclick(); $this_place.trigger("click"); } } else { $this_place.trigger("click"); } }, start: function (event, ui) { $(".guideareas").hide() $(".ui-state-highlight").html('拖放控件到这里'); $(".field_option").hide(); $("#app_layout_list .item_row").removeClass('active') }, out: function (event, ui) { if (ui.helper != null) { var falg = true; for (item in options.controlDataJson) { falg = false; break; } if (falg) { $(".guideareas").show(); } } } }); item_rowclick(); function item_rowclick() { $("#app_layout_list .item_row").find('.item_field_remove i').click(function () { var $item_row = $(this).parents('.item_row'); delete options.controlDataJson[$item_row.attr('data-value')]; $item_row.remove(); $(".field_option").animate({ right: -240, speed: 2000 }); var falg = true; for (item in options.controlDataJson) { falg = false; break; } if (falg) { $(".guideareas").show(); } });//移除空件 $("#app_layout_list .item_row").unbind('click'); $("#app_layout_list .item_row").click(function () { var $this = $(this); var $field_option = $(".field_option"); $("#app_layout_list .item_row").removeClass('active').removeClass('activeerror'); $this.addClass('active'); $('.field_option').animate({ right: 0, speed: 2000 }).show(); initControlProperty($this); }); document.onclick = function (event) { try { var _event = event ? event : window.event; var _target = _event.target ? _event.target : _event.srcElement; var className = ""; while (className != "app_body") { className = _target.className; if (className == undefined || className.indexOf("notclose") > 0) { break; } _target = _target.parentNode; if (_target == null) { break; } } if (className != undefined && className.indexOf("notclose") < 0 && _target != null) { $(".field_option").animate({ right: -240, speed: 2000 }); $("#app_layout_list .item_row").removeClass('active').removeClass('activeerror'); } } catch(e) { } }; } //初始化控件属性 function initControlProperty(e) { var rowJson = options.controlDataJson[e.attr('data-value')]; if (rowJson) { switch (rowJson.control_type) { case "text": textProperty(e); break; case "textarea": textareaProperty(e); break; case "texteditor": texteditorProperty(e); break; break; case "radio": radioProperty(e); break; case "checkbox": checkboxProperty(e); break; case "select": selectProperty(e); break; case "datetime": datetimeProperty(e); break; case "image": imageProperty(e); break; case "upload": uploadProperty(e); break; case "departmentlist": break; case "dataitemlist": break; default: break; } } else { //$(".field_option").html(""); } } //获取表单 if (options.frmContent != "" && options.frmContent != null) { frmToHtml(options.frmContent); } else if (options.url != "") { $.ajax({ url: options.url, data: options.param, type: "GET", dataType: "json", async: false, success: function (data) { if (data.FrmContent != null) { frmToHtml(data.FrmContent); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { dialogMsg(errorThrown, -1); } }); } //json=>html function frmToHtml(frmContent) { var frmContentJson = eval('(' + frmContent + ')'); var num = 0; $app_layout_list = $('#app_layout_list'); $.each(frmContentJson, function (id, item) { $(".guideareas").hide(); var random_id = String(Math.random()).substr(2); options.controlDataJson[random_id] = item; var controlitemstr = ""; if (item.control_item != undefined) { var controlitem = []; $.each(item.control_item, function (i, n) { controlitem[n.identify] = n; if (controlitemstr != "") { controlitemstr += "、"; } controlitemstr += n.name; }); options.controlDataJson[random_id].control_item = controlitem; } var controlrequired = item.control_required == '1' ? '*' : ''; var _item_field_value = ""; switch (item.control_type) { case "text": _item_field_value = "文本框"; break; case "textarea": _item_field_value = "文本区"; break; case "texteditor": _item_field_value = "编辑器"; break; case "radio": _item_field_value = "单选项/"; break; case "checkbox": _item_field_value = "多选项/"; break; case "select": _item_field_value = "下拉框/"; break; case "datetime": _item_field_value = "年-月-日"; break; case "image": _item_field_value = "上传图片/" + item.control_fileformat; break; case "upload": _item_field_value = "上传文件/"+ item.control_fileformat; break; case "departmentlist": break; case "dataitemlist": break; default: break; } var $item_control = $('
' + item.control_label + '' + controlrequired + '
' + _item_field_value + controlitemstr + '
'); if ($item_control) { $item_control.attr('data-value', random_id); $app_layout_list.append($item_control); item_rowclick(); if (num == 0) { $item_control.trigger("click"); } num++; } }); $app_layout_list.find('.item_field_value').width(item_field_value_width); } } formdesigner_move(); function textProperty(e_row) { var _html = ''; _html += '
无样式的单行文本框
'; _html += '
字段标识
'; _html += '
';// _html += '
字段说明
'; _html += '
'; _html += '
字段验证
'; _html += '
'; _html += '
默认值
'; _html += '
'; _html += '
设置
'; _html += '
';// var $html = $(_html); $(".field_option").html($html); var rowJson = options.controlDataJson[e_row.attr('data-value')]; if (rowJson == null) { return false; } setControlField(rowJson, e_row, $html); $html.find('#control_label').val(rowJson.control_label); $html.find('#control_verify').val(rowJson.control_verify); $html.find('#control_default').val(rowJson.control_default); if (rowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_verify').change(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_default').keyup(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); //$html.find('#control_only').click(function (e) { // var value = 0; // if ($(this).attr("checked")) { // $(this).attr("checked", false); // value = 0; // } else { // $(this).attr("checked", true); // value = 1; // } // rowJson[$(this).attr('id')] = value; // controlDataJson[e_row.attr('data-value')] = rowJson; //}); } function textareaProperty(e_row) { var _html = ''; _html += '
无样式的多行文本框
'; _html += '
字段标识
'; _html += '
'; _html += '
字段说明
'; _html += '
'; _html += '
字段高度
'; _html += '
'; _html += '
默认值
'; _html += '
'; _html += '
设置
'; _html += '
'; var $html = $(_html); $(".field_option").html($html); var rowJson = options.controlDataJson[e_row.attr('data-value')]; if (rowJson == null) { return false; } setControlField(rowJson, e_row, $html); $html.find('#control_label').val(rowJson.control_label); $html.find('#control_verify').val(rowJson.control_verify); $html.find('#control_height').val(rowJson.control_height); $html.find('#control_default').val(rowJson.control_default); if (rowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_verify').change(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_height').change(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_default').keyup(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); } function texteditorProperty(e_row) { var _html = ''; _html += '
类似word,可设置丰富文字样式的多行文本编辑区
'; _html += '
字段标识
'; _html += '
'; _html += '
字段说明
'; _html += '
'; _html += '
字段高度
'; _html += '
'; _html += '
默认值
'; _html += '
'; _html += '
设置
'; _html += '
'; var $html = $(_html); $(".field_option").html($html); var rowJson = options.controlDataJson[e_row.attr('data-value')]; if (rowJson == null) { return false; } setControlField(rowJson, e_row, $html); $html.find('#control_label').val(rowJson.control_label); $html.find('#control_verify').val(rowJson.control_verify); $html.find('#control_height').val(rowJson.control_height); $html.find('#control_default').val(rowJson.control_default); if (rowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_verify').change(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_height').change(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_default').keyup(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); } function radioProperty(e_row) { var _html = ''; _html += '
显示所有备选项,从中只可选择一项
'; _html += '
字段标识
'; _html += '
'; _html += '
字段说明
'; _html += '
'; _html += '
备选项
添加
'; _html += '
'; _html += '
设置
'; _html += '
'; var $html = $(_html); $(".field_option").html($html); var getRowJson = options.controlDataJson[e_row.attr('data-value')]; if (getRowJson == null) { return false; } setControlField(getRowJson, e_row, $html); $html.find('#control_label').val(getRowJson.control_label); if (getRowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); getRowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = getRowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } getRowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = getRowJson; }); //处理备选项 var $classify = $(".field_control .classify"); $classify.sortable({ handle: '.dragitem', stop: function (event, ui) { var tempitemjson = controlItemListJson; controlItemListJson = {}; $classify.find('li').each(function (i) { var id = $(this).attr('data-value'); controlItemListJson[id] = tempitemjson[id]; }); options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name) }; } e_row.find('.item_field_value').html('单选项/' + String(_name).replace(/,/g, '、')); } }); //选项列表Json var controlItemListJson = options.controlDataJson[e_row.attr('data-value')]["control_item"]; for (var i in controlItemListJson) { additem(i); var $thisObjectRow = $classify.find('[data-value=' + i + ']'); $thisObjectRow.find('input[name=name]').val(controlItemListJson[i].name); $thisObjectRow.find('em').attr('class', controlItemListJson[i].color); $thisObjectRow.find('input[name=defaults]').attr("checked", controlItemListJson[i].defaults == 1 ? true : false); } //添加一项li $('.addclassify').find('a').click(function () { var random_id = String(Math.random()).substr(2); controlItemListJson[random_id] = { identify: random_id, color: "color_a", name: "", defaults: "0", } additem(random_id); }) function additem(random_id) { var $li = $('
  • '); $li.attr('data-value', random_id) $classify.append($li); //移除一项li $li.find('i.fa-close').click(function () { var id = $(this).parents('li').attr('data-value'); delete controlItemListJson[id]; $(this).parents('li').remove(); options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name) }; } e_row.find('.item_field_value').html('单选项/' + String(_name).replace(/,/g, '、')); }); //点击切换色彩 var clickindex = 1; $li.find('em').click(function () { var color = ['color_a', 'color_b', 'color_c', 'color_d', 'color_e', 'color_f', 'color_g', 'color_h', 'color_i']; $(this).attr('class', color[clickindex]); controlItemListJson[$(this).parents('li').attr('data-value')].color = color[clickindex]; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; clickindex++; if (clickindex == 9) { clickindex = 0 } }); //默认值事件 $li.find('input[name=defaults]').click(function () { for (var i in controlItemListJson) { controlItemListJson[i].defaults = 0; } controlItemListJson[$(this).parents('li').attr('data-value')].defaults = 1; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; }); //输入事件 $li.find('input[name=name]').change(function () { var value = $(this).val(); controlItemListJson[$(this).parents('li').attr('data-value')].name = value; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name); } } e_row.find('.item_field_value').html('单选项/' + String(_name).replace(/,/g, '、')); }) } if ($classify.find('li').length == 0) { $('.addclassify').find('a').trigger("click"); } } function checkboxProperty(e_row) { var _html = ''; _html += '
    显示所有备选项,从中可以选择多项
    '; _html += '
    字段标识
    '; _html += '
    '; _html += '
    字段说明
    '; _html += '
    '; _html += '
    备选项
    添加
    '; _html += '
    '; _html += '
    设置
    '; _html += '
    '; var $html = $(_html); $(".field_option").html($html); var getRowJson = options.controlDataJson[e_row.attr('data-value')]; if (getRowJson == null) { return false; } setControlField(getRowJson, e_row, $html); $html.find('#control_label').val(getRowJson.control_label); if (getRowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); getRowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = getRowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } getRowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = getRowJson; }); //处理备选项 var $classify = $(".field_control .classify"); $classify.sortable({ handle: '.dragitem', stop: function (event, ui) { var tempitemjson = controlItemListJson; controlItemListJson = {}; $classify.find('li').each(function (i) { var id = $(this).attr('data-value'); controlItemListJson[id] = tempitemjson[id]; }); options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name) }; } e_row.find('.item_field_value').html('多选项/' + String(_name).replace(/,/g, '、')); } }); //选项列表Json var controlItemListJson = options.controlDataJson[e_row.attr('data-value')]["control_item"]; for (var i in controlItemListJson) { additem(i); var $thisObjectRow = $classify.find('[data-value=' + i + ']'); $thisObjectRow.find('input[name=name]').val(controlItemListJson[i].name); $thisObjectRow.find('em').attr('class', controlItemListJson[i].color); $thisObjectRow.find('input[name=defaults]').attr("checked", controlItemListJson[i].defaults == 1 ? true : false); } //添加一项li $('.addclassify').find('a').click(function () { var random_id = String(Math.random()).substr(2); controlItemListJson[random_id] = { identify: random_id, color: "color_a", name: "", defaults: "0", } additem(random_id); }) function additem(random_id) { var $li = $('
  • '); $li.attr('data-value', random_id) $classify.append($li); //移除一项li $li.find('i.fa-close').click(function () { var id = $(this).parents('li').attr('data-value'); delete controlItemListJson[id]; $(this).parents('li').remove(); options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name) }; } e_row.find('.item_field_value').html('多选项/' + String(_name).replace(/,/g, '、')); }); //点击切换色彩 var clickindex = 1; $li.find('em').click(function () { var color = ['color_a', 'color_b', 'color_c', 'color_d', 'color_e', 'color_f', 'color_g', 'color_h', 'color_i']; $(this).attr('class', color[clickindex]); controlItemListJson[$(this).parents('li').attr('data-value')].color = color[clickindex]; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; clickindex++; if (clickindex == 9) { clickindex = 0 } }); //复选框事件 $li.find('input[name=defaults]').click(function () { controlItemListJson[$(this).parents('li').attr('data-value')].defaults = 1; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; }); //输入事件 $li.find('input[name=name]').keyup(function () { var value = $(this).val(); controlItemListJson[$(this).parents('li').attr('data-value')].name = value; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name); } } e_row.find('.item_field_value').html('多选项/' + String(_name).replace(/,/g, '、')); }) } if ($classify.find('li').length == 0) { $('.addclassify').find('a').trigger("click"); } } function selectProperty(e_row) { var _html = ''; _html += '
    显示所有备选项,从中只可选择一项
    '; _html += '
    字段标识
    '; _html += '
    '; _html += '
    字段说明
    '; _html += '
    '; _html += '
    备选项
    添加
    '; _html += '
    '; _html += '
    设置
    '; _html += '
    '; var $html = $(_html); $(".field_option").html($html); var getRowJson = options.controlDataJson[e_row.attr('data-value')]; if (getRowJson == null) { return false; } setControlField(getRowJson, e_row, $html); $html.find('#control_label').val(getRowJson.control_label); if (getRowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); getRowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = getRowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } getRowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = getRowJson; }); //处理备选项 var $classify = $(".field_control .classify"); $classify.sortable({ handle: '.dragitem', stop: function (event, ui) { var tempitemjson = controlItemListJson; controlItemListJson = {}; $classify.find('li').each(function (i) { var id = $(this).attr('data-value'); controlItemListJson[id] = tempitemjson[id]; }); options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name) }; } e_row.find('.item_field_value').html('下拉框/' + String(_name).replace(/,/g, '、')); } }); //选项列表Json var controlItemListJson = options.controlDataJson[e_row.attr('data-value')]["control_item"]; for (var i in controlItemListJson) { additem(i); var $thisObjectRow = $classify.find('[data-value=' + i + ']'); $thisObjectRow.find('input[name=name]').val(controlItemListJson[i].name); $thisObjectRow.find('em').attr('class', controlItemListJson[i].color); $thisObjectRow.find('input[name=defaults]').attr("checked", controlItemListJson[i].defaults == 1 ? true : false); } //添加一项li $('.addclassify').find('a').click(function () { var random_id = String(Math.random()).substr(2); controlItemListJson[random_id] = { identify: random_id, color: "color_a", name: "", defaults: "0", } additem(random_id); }) function additem(random_id) { var $li = $('
  • '); $li.attr('data-value', random_id) $classify.append($li); //移除一项li $li.find('i.fa-close').click(function () { var id = $(this).parents('li').attr('data-value'); delete controlItemListJson[id]; $(this).parents('li').remove(); options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name) }; } e_row.find('.item_field_value').html('下拉框/' + String(_name).replace(/,/g, '、')); }); //点击切换色彩 var clickindex = 1; $li.find('em').click(function () { var color = ['color_a', 'color_b', 'color_c', 'color_d', 'color_e', 'color_f', 'color_g', 'color_h', 'color_i']; $(this).attr('class', color[clickindex]); controlItemListJson[$(this).parents('li').attr('data-value')].color = color[clickindex]; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; clickindex++; if (clickindex == 9) { clickindex = 0 } }); //默认值事件 $li.find('input[name=defaults]').click(function () { for (var i in controlItemListJson) { controlItemListJson[i].defaults = 0; } controlItemListJson[$(this).parents('li').attr('data-value')].defaults = 1; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; }); //输入事件 $li.find('input[name=name]').keyup(function () { var value = $(this).val(); controlItemListJson[$(this).parents('li').attr('data-value')].name = value; options.controlDataJson[e_row.attr('data-value')]["control_item"] = controlItemListJson; var _name = []; for (var i in controlItemListJson) { if (controlItemListJson[i].name) { _name.push(controlItemListJson[i].name); } } e_row.find('.item_field_value').html('下拉框/' + String(_name).replace(/,/g, '、')); }) } if ($classify.find('li').length == 0) { $('.addclassify').find('a').trigger("click"); } } function datetimeProperty(e_row) { var _html = ''; _html += '
    选择日期、时间控件
    '; _html += '
    字段标识
    '; _html += '
    '; _html += '
    字段说明
    '; _html += '
    '; _html += '
    日期格式
    '; _html += '
    '; _html += '
    默认值
    '; _html += '
    '; _html += '
    设置
    '; _html += '
    '; var $html = $(_html); $(".field_option").html($html); var rowJson = options.controlDataJson[e_row.attr('data-value')]; if (rowJson == null) { return false; } setControlField(rowJson, e_row, $html); $html.find('#control_label').val(rowJson.control_label); $html.find('#control_dateformat').val(rowJson.control_dateformat); $html.find('#control_default').val(rowJson.control_default); if (rowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_dateformat').change(function (e) { var value = $(this).val(); if (value == 'date') { e_row.find('.item_field_value').html('年-月-日'); } else if (value == 'datetime') { e_row.find('.item_field_value').html('年-月-日 时:分'); } rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_default').change(function (e) { var value = $(this).val(); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); } function imageProperty(e_row) { var _html = ''; _html += '
    字段标识
    '; _html += '
    '; _html += '
    字段说明
    '; _html += '
    '; _html += '
    图片格式
    '; _html += '
    '; _html += '
    设置
    '; _html += '
    '; var $html = $(_html); $(".field_option").html($html); var rowJson = options.controlDataJson[e_row.attr('data-value')]; if (rowJson == null) { return false; } setControlField(rowJson, e_row, $html); $html.find('#control_label').val(rowJson.control_label); $html.find('#control_fileformat').val(rowJson.control_fileformat); if (rowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_fileformat').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_value').html('上传图片/' + value); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); } function uploadProperty(e_row) { var _html = ''; _html += '
    字段标识
    '; _html += '
    '; _html += '
    字段说明
    '; _html += '
    '; _html += '
    文件格式
    '; _html += '
    '; _html += '
    设置
    '; _html += '
    '; var $html = $(_html); $(".field_option").html($html); var rowJson = options.controlDataJson[e_row.attr('data-value')]; if (rowJson == null) { return false; } setControlField(rowJson, e_row, $html); $html.find('#control_label').val(rowJson.control_label); $html.find('#control_fileformat').val(rowJson.control_fileformat); if (rowJson.control_required == 1) { $html.find('#control_required').attr("checked", 'checked'); } else { $html.find('#control_required').removeAttr("checked"); } $html.find('#control_label').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_label').find('span').html(value); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_fileformat').keyup(function (e) { var value = $(this).val(); e_row.find('.item_field_value').html('上传文件/' + value); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); $html.find('#control_required').click(function (e) { var value = 0; if ($(this).attr("checked")) { value = 0; $(this).attr("checked", false); e_row.find('.item_field_label').find('font').remove(); } else { value = 1; $(this).attr("checked", true); e_row.find('.item_field_label').append('*'); } rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); } function dataitemlistProperty(e_row) { } //绑定数据表字段 function setControlField(rowJson, e_row, $html) { var _value = (rowJson.control_field == "" ? newGuid() : rowJson.control_field); if (options.isSystemTable == 0) { $html.find("#control_field").parents('.field_control').html(''); rowJson.control_field = _value; options.controlDataJson[e_row.attr('data-value')] = rowJson; } else { $html.find("#control_field").parents('.field_control').html('
    '); $html.find("#control_field").ComboBox({ data: options.tablefiledJsonData, id: "f_column", text: "f_remark", description: "==请选择==", height: "230px", allowSearch: true }); $html.find("#control_field").ComboBoxSetValue(rowJson.control_field); $html.find('#control_field').change(function (e) { var value = $(this).attr('data-value'); rowJson[$(this).attr('id')] = value; options.controlDataJson[e_row.attr('data-value')] = rowJson; }); } } return options; } //表单预览 $.fn.frmPreview = function (options) { var $frmpreview= $(this); if (!$frmpreview.attr('id')) { return false; } $frmpreview.html(""); var defaults = { tablecotent: [], width:0, datetime:new Date() }; var options = $.extend(defaults, options); if (options.tablecotent == "") { return false; } var frmContentJson = eval('(' + options.tablecotent + ')'); $.each(frmContentJson, function (id, item) { var $item_control = $('
    '); var controlrequired = item.control_required == '1' ? '*' : ''; var controlrequired1 = item.control_required == '1' ? 'isvalid="yes" checkexpession="NotNull"' : ''; item.control_field = 'frm_' + item.control_field; $item_control.html('
    ' + item.control_label + '' + controlrequired + '
    '); switch (item.control_type) { case "text": $item_control.append('
    '); break; case "textarea": $item_control.append('