现在的位置: 首页 > 综合 > 正文

【b2c】商品自定义模型的研究就部分实现

2014年09月05日 ⁄ 综合 ⁄ 共 46872字 ⁄ 字号 评论关闭

前言

网店部分的商品恐怕是非常基础同时也是非常考验人的一个部分了。因为不同产品有不同属性,一个产品有多个sku,应该如何设计呢?

用文字不太会表单,下面我就将部分数据库设计及前端页面,后台代码及数据传输格式给贴出来。

数据库设计:

chooseType,表示该属性的选择类型,可以为单选,多选及自定义输入。其中前两者必定需要记录选择项。
-- Table: "xx_attr_chooseType"
-- DROP TABLE "xx_attr_chooseType";
CREATE TABLE "xx_attr_chooseType"( 
 id serial NOT NULL, 
 name character varying(50) NOT NULL,
  CONSTRAINT "xx_attr_chooseType_pkey" PRIMARY KEY (id))
WITH (  OIDS=FALSE);ALTER TABLE "xx_attr_chooseType"  OWNER TO postgres;

uiType,表示该属性(针对于自定义输入)的ui类型,可以为url,普通字符串,日期等等。

-- Table: "xx_attr_uiType"
-- DROP TABLE "xx_attr_uiType";
CREATE TABLE "xx_attr_uiType"( 
 id serial NOT NULL,
  name character varying(50) NOT NULL, 
 CONSTRAINT "xx_attr_uiType_pkey" PRIMARY KEY (id))
WITH (  OIDS=FALSE);
ALTER TABLE "xx_attr_uiType"  OWNER TO postgres;

type,表示该属性的类型,通常分为sku属性及普通展示属性。

-- Table: xx_attr_type-- 
DROP TABLE xx_attr_type;
CREATE TABLE xx_attr_type( 
 id serial NOT NULL,
  name character varying(50) NOT NULL, 
 CONSTRAINT xx_attr_type_pkey PRIMARY KEY (id))
WITH (  OIDS=FALSE);
ALTER TABLE xx_attr_type  OWNER TO postgres;

name表,表示该属性的名称表,

    id:0,//数据库的id  
moduleid:0,//数据库对应的模型id。 
 name:"",//属性名称,中文名称。
 attrName:"",//属性的英文名称,用于方便提交表单时候进行相关操作。请注意,同一个模型里面不能有相同的属性名称。 
 tips:"",//属性填写提示。   
 chooseType:1,//选择类型,1:单选,2:多选,3:手写输入   
 attrType:1,//属性类型,1、sku属性,2、普通展示属性。    isRequired:true,//是否必须填写或选择。 usedInSearch:true,//是否在搜索里面使用。  
enabled:true,//该属性是否启用。 
 isMain:false,//是否主要的sku属性。只有在单选及手写情况下,才可能是sku。还有,手写时候,没办法设置为搜索属性。 
orders:0,//该属性的排位。
  /*single 单选系列参数*/   
single_isColor:false,  
single_imgAllowed:false, 
   /*单选参数结束*/   /*多选系列参数*/  
muti_maxSelected:0,  /*多选参数结束*/   /*手动输入系列参数*/  
 input_uiType:0,  
/*手动输入参数结束*/  
/*共用,选择类型的option*/  
options:[] //里面的item为:{id:0,name:"",orders:"",color:"",enabled:false}    /*option结束*/
-- Table: xx_attr_val
-- DROP TABLE xx_attr_val;
CREATE TABLE xx_attr_val(  id serial NOT NULL,  nameid integer NOT NULL,  name character varying(200) NOT NULL,  orders integer DEFAULT 0,  color character varying(20) DEFAULT ''::character varying,  enabled boolean NOT NULL DEFAULT true,  CONSTRAINT xx_attr_val_pkey PRIMARY KEY (id),  CONSTRAINT xx_attr_val_nameid_fkey FOREIGN KEY (nameid)      REFERENCES xx_attr_name (id) MATCH SIMPLE      ON UPDATE NO ACTION ON DELETE NO ACTION)WITH (  OIDS=FALSE);ALTER TABLE xx_attr_val  OWNER TO postgres;
val,值表,
-- Table: xx_attr_va
l-- DROP TABLE xx_attr_val;
CREATE TABLE xx_attr_val(  id serial NOT NULL,  nameid integer NOT NULL,  name character varying(200) NOT NULL,  orders integer DEFAULT 0,  color character varying(20) DEFAULT ''::character varying,  enabled boolean NOT NULL DEFAULT true,  CONSTRAINT xx_attr_val_pkey PRIMARY KEY (id),  CONSTRAINT xx_attr_val_nameid_fkey FOREIGN KEY (nameid)      REFERENCES xx_attr_name (id) MATCH SIMPLE      ON UPDATE NO ACTION ON DELETE NO ACTION)WITH (  OIDS=FALSE);ALTER TABLE xx_attr_val  OWNER TO postgres;

module模型表

-- Table: xx_module-- DROP TABLE xx_module;CREATE TABLE xx_module(  id serial NOT NULL,  name character varying(50) NOT NULL,  logo character varying(200) DEFAULT ''::character varying,  memo character varying(200) DEFAULT ''::character varying,  orders smallint DEFAULT 0,  enabled boolean DEFAULT true,  CONSTRAINT xx_module_pkey PRIMARY KEY (id))WITH (  OIDS=FALSE);ALTER TABLE xx_module  OWNER TO postgres;
每一个模型module都有自己的属性,该属性可以为单选,多选及自定义输入,单选及多选项可以作为搜索条件,而且需要将其入库。下面是相关页面及数据格式,js实现。
前端页面:
   
   
   
   
   
   
   
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7"/>
  <title>
  编辑商品模型
  </title>
   
  <link href="/static/style/user/css/reset.css"rel="stylesheet"type="text/css" />
  <link href="/static/style/user/css/zh-cn-system.css"rel="stylesheet"type="text/css"
/>
  <link href="/static/style/user/css/table_form.css"rel="stylesheet"type="text/css"
/>
  <link href="/static/style/admin/component.css"rel="stylesheet"type="text/css" />
   
  <script type="text/javascript" src="/static/lib/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="/static/lib/jquery.cookie.min.js"></script>
  <script type="text/javascript" src="/static/lib/util.min.js"></script>
  <script type="text/javascript" src="/static/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="/static/lib/jshashtable.min.js"></script>
  <script type="text/javascript" src="/static/lib/json2.js"></script>
  <!--弹出窗口插件-->
  <link rel="stylesheet" href="/static/UI/artdialog/skins/blue.css" />
  <script type="text/javascript" src="/static/UI/artdialog/artDialog.js"></script>
  <script type="text/javascript" src="/static/UI/artdialog/plugins/iframeTools.js"></script>
  <script type="text/javascript" src="/static/UI/artdialog/artDialog.ex.js"></script>
  <!--分页插件-->
  <link href="/static/UI/myPagination/css/page.css"rel="stylesheet"type="text/css"
/>
  <script src="/static/UI/myPagination/js/jquery.myPagination5.0.js"type="text/javascript"></script>
   
  <!--日期-->
  <script language="javascript" type="text/javascript"src="/static/UI/dataPicker/WdatePicker.js"></script>
  <!--邮箱自动提示-->
  <script type="text/javascript" src="/static/UI/mailTip/jquery.mailtip.min.js"></script>
  <link type="text/css" rel="stylesheet"href="/static/UI/mailTip/mailtip.min.css"/>
  <!--颜色选择-->
  <script type="text/javascript" src="/static/UI/colorPicker/farbtastic.min.js"></script>
  <link rel="stylesheet" href="/static/UI/colorPicker/farbtastic.min.css"type="text/css"
/>
  <!--数字选择器-->
  <script type="text/javascript" src="/static/UI/numberSelector/index.min.js"></script>
  <link href="/static/UI/numberSelector/number_selector.min.css"type="text/css"rel="stylesheet"/>
  <!--邮箱输入框-->
  <script type="text/javascript" src="/static/UI/mailTip/jquery.mailtip.min.js"></script>
  <link type="text/css" rel="stylesheet"href="/static/UI/mailTip/mailtip.min.css"/>
  <!--引入表单验证插件-->
  <!--密码强度判断-->
  <link href="/static/UI/password_strength/style/css/password_strength.min.css"rel="stylesheet"type="text/css"
/>
  <script type="text/javascript" src="/static/UI/password_strength/js/jquery.passwordStrength.min.js"></script>
  <script type="text/javascript" src="/static/UI/easisvalidator/js/easis.validator.min.js"></script>
  <link href="/static/UI/easisvalidator/css/validate2.css"rel="stylesheet"type="text/css"
/>
  <!--图片预览框-->
  <script type="text/javascript" src="/static/UI/imgBox/imgPreviewBox.min.js"></script>
  <script src="/static/SUI/filemgr/interface.js"></script>
  <!--ueditor-->
  <!-- 配置文件 -->
  <script type="text/javascript" src="/static/UI/ueditor/ueditor.config.js"></script>
  <!-- 编辑器源码文件 -->
  <script type="text/javascript" src="/static/UI/ueditor/ueditor.all.js"></script>
  <!-- 语言包文件(建议手动加载语言包,避免在ie下,因为加载语言失败导致编辑器加载失败) -->
  <script type="text/javascript" src="/static/UI/ueditor/lang/zh-cn/zh-cn.js"></script>
  <!--layer1.8-->
  <script type="text/javascript" src="/static/UI/layer1.8/layer/layer.min.js"></script>
  <!--前台页面全局js-->
  <script type="text/javascript" src="/static/action/admin/admin.all.js"></script>
  <style type="text/css">html{_overflow-y:scroll}</style>
  </head>
  <body>
   
  <div class="subnav">
  <div class="content-menu ib-a blue line-x">
  <a class="add fb" href="javascript:void(0);"><em>商品模型管理</em></a>
  <a href='javascript:;'class="on"><em>编辑商品模型</em></a>
  <span>|</span>
  <a href='javascript:history.back(-1);'><em>返回上一页</em></a>
  <span>|</span>
  <a href='list.jspx'><em>返回列表</em></a>
  </div>
  </div>
  <div class="pad-10">
  <form action="" method="post"
id
="myform">
   
  <fieldset>
  <legend>基本资料</legend>
   
   
  <table width="100%" class="table_form">
  <tr style="display: none;">
  <th>主键:</th>
  <td>
  <input id="txt_id" type="hidden"name="model.id"value="1" />
  【隐藏字段】
  <span tipsfor="tips_model_id"></span>
  </td>
  </tr>
   
   
  <tr>
  <th width="80">模型名称:</th>
  <td class="y-bg">
  <input id="txt_name" type="text"class="input-text"size="30"
name="model.name" value="手机模型" />
  <span tipsfor="name"></span><!--tips for name-->
  </td>
  </tr>
  <tr>
  <th width="80">是否启用:</th>
  <td class="y-bg">
  <input type="checkbox" id="cbox_enabled"value="true"name="model.enabled"checked='checked' >
  <span tipsfor="enabled"></span><!--tips for enabled-->
  </td>
  </tr>
   
  <tr>
  <th width="80">logo:</th>
  <td class="y-bg">
  <input id="txt_logo" type="text"class="input-text"size="30"
name="model.logo" value="" />
  <span tipsfor="logo"></span><!--tips for logo-->
  </td>
  </tr>
   
   
  <tr>
  <th width="80">模型描述:</th>
  <td class="y-bg">
  <textarea id="txt_memo" cols="50"rows="6"class="textarea"
name="model.memo">
手机模型,用于描述各个手机参数。</textarea>
  <span tipsfor="memo"></span><!--tips for memo-->
  </td>
  </tr>
   
  <tr>
  <th width="80">排序:</th>
  <td class="y-bg">
  <input id="txt_orders" type="text"class="input-text"size="30"
name="model.orders"value="1" />
  <span tipsfor="orders"></span><!--tips for orders-->
  </td>
  </tr>
  </table>
  <input type="button" class="button"id="dosubmit"name="dosubmit"value="保存基本资料"/>
  </fieldset>
   
  <div class="bk15"></div>
  <!--
  <fieldset>
  <legend>FTP服务器</legend>
  <table width="100%" class="table_form">
  <tr>
  <th width="80">服务器地址:</th>
  <td class="y-bg"><input type="text" class="input-text" name="host" id="host" size="30"/></td>
  </tr>
 
  </table>
  </fieldset>
  <div class="bk15"></div>
  -->
   
  </form>
  <div class="bk15"></div>
  <form id="form_attr">
  <fieldset>
  <input type="hidden" name="model.id"value="1" />
  <legend>属性列表</legend>
  <table width="100%" class="table_form">
  <tr>
  <th width="80">属性列表:</th>
  <td class="y-bg">
  <input type="button" class="button"value="添加属性"onclick="_addAttr();"/>
  <span tipsfor="attrList"></span>
  </td>
  </tr>
  <tr>
  <th width="80">&nbsp;</th>
  <td class="y-bg">
  <input type="hidden" id="txt_json"name="model.json">
   
  <div class="attach_list">
  <ul id="attrListUL">
   
  </ul>
  </div>
   
  </td>
  </tr>
   
  </table>
  <input type="button" class="button"id="dosaveattr"name="dosubmit"value="保存属性列表"/>
   
  </fieldset>
  <div class="bk15"></div>
   
  </form>
  </div>
  <script type="text/javascript">
  //模型的自定义逻辑
  //--数据区域。该模型的所有数据。
  var ModuleData={
  id:0,
  name:"",
  logo:"",
  memo:"",
  orders:0,
  enabled:true,
  attrList:[]// 属性列表 ,里面的属性请参考下面AttrDataSample
  };
  //--数据区域。该模型的所有数据。
  var AttrDataSample={
  id:0,//数据库的id
  moduleid:0,//数据库对应的模型id。
  name:"",//属性名称,中文名称。
  attrName:"",//属性的英文名称,用于方便提交表单时候进行相关操作。请注意,同一个模型里面不能有相同的属性名称。
  tips:"",//属性填写提示。
  chooseType:1,//选择类型,1:单选,2:多选,3:手写输入
  attrType:1,//属性类型,1、sku属性,2、普通展示属性。
  isRequired:true,//是否必须填写或选择。
  usedInSearch:true,//是否在搜索里面使用。
  enabled:true,//该属性是否启用。
  isMain:false,//是否主要的sku属性。
  orders:0,//该属性的排位。
  /*single 单选系列参数*/
  single_isColor:false,
  single_imgAllowed:false,
  /*单选参数结束*/
  /*多选系列参数*/
  muti_maxSelected:0,
  /*多选参数结束*/
  /*手动输入系列参数*/
  input_uiType:0,
  /*手动输入参数结束*/
  /*共用,选择类型的option*/
  options:[] //里面的item为:{id:0,name:"",orders:"",color:"",enabled:false}
  };
   
  var jel_listWrapper=$("#attrListUL");
   
  //--生成attrList。
  function generate_AttrList(){
  var arr2=ModuleData.attrList.sort(function(a,b){
  var _a=(a["enabled"]==true?0:1)*9999+ a.orders;
  var _b=(b["enabled"]==true?0:1)*9999+ b.orders;
  return _a-_b;
  });
  ModuleData.attrList=arr2;
  var html=[];
  for(var i=0;i<ModuleData.attrList.length;i++){
  var item=ModuleData.attrList[i];
   
  var _str_item="";
  //'<li arrindex="'+i+'" attrid="'+item["id"]+'" attrname="'+item["name"]+'" attrorders="'+item["orders"]+'" attrcolor="'+item["color"]+'"><span class="option_text">'+item["name"]+'(排序:'+item["orders"]+')</span>' +
  //'<a onclick="javascript:editSingleSelectOption(this);">编辑</a><a onclick="javascript:deleteSingleSelectOption(this);" >删除</a></li>';
  if(item["enabled"]==false){
  _str_item='<li class="voteitem"><span style="color:#333333;font-style:italic;">'+item["name"]+'(禁用)</span><b onclick="_disableAttr('+i+');" class=" deletable"></b><b onclick="_editAttr('+i+');" class="editable"></b></li>';
  }
  else{
  _str_item='<li class="voteitem"><span style="">'+item["name"]+'</span><b onclick="_disableAttr('+i+');" class=" deletable" ></b><b onclick="_editAttr('+i+');" class="editable"></b></li>';
  }
   
  html.push(_str_item);
  }
  jel_listWrapper.html(html.join(""));
  }
   
  //--添加属性
  var _addAttr=function(){
  // 默认值
  var __ids="newAttrWin"+Math.random();
  __ids=__ids.replace("[.]+","");
  var __iframe_str="<iframe id=\""+__ids+"\" src=\"../ModuleAttrName/add.jspx\" " +
  "style='padding:0; margin: 0; display: block; width:500px; height:400px;'" +
  " frameborder='no' scrolling='auto'></iframe>";
  var _dialog=null;
  var _saveInfo=null;
  _dialog=art.dialog.open("../ModuleAttrName/add.jspx",{
  title:"添加属性",
  okValue:"确定",
  width: 600,
  height: 500,
  lock:true,
  init:function(){
  var iframe = this.iframe.contentWindow;
  var func_init= iframe.PageInit;
  func_init();
  _saveInfo=iframe.saveInfo;
  },
  ok:function(){
  //var JsonList= document.getElementById(__ids).contentWindow.GetSelectedFileList();
  //settings.callBack(JsonList);
  _saveInfo(function(data){
   
  //layer.alert("iframe传回来的值:"+JSON.stringify(data));
  ModuleData.attrList.push(data);
  generate_AttrList();
  _dialog.close();
  });
  return false;
  },
  cancelValue:"取消",
  cancel:function(){
   
  }
  });
   
  }
  var _editAttr=function(index){
  // 默认值
  var __ids="newAttrWin"+Math.random();
  __ids=__ids.replace("[.]+","");
  var _item=ModuleData.attrList[index];
  var __iframe_str="<iframe id=\""+__ids+"\" src=\"../ModuleAttrName/add.jspx\" " +
  "style='padding:0; margin: 0; display: block; width:500px; height:400px;'" +
  " frameborder='no' scrolling='auto'></iframe>";
  var _dialog=null;
  var _saveInfo=null;
  _dialog=art.dialog.open("../ModuleAttrName/add.jspx",{
  title:"编辑属性",
  okValue:"确定",
  width: 600,
  height: 500,
  lock:true,
  init:function(){
  var iframe = this.iframe.contentWindow;
  var func_init= iframe.PageInit;
  func_init(_item);
  _saveInfo=iframe.saveInfo;
  },
  ok:function(){
  //var JsonList= document.getElementById(__ids).contentWindow.GetSelectedFileList();
  //settings.callBack(JsonList);
  _saveInfo(function(data){
   
  //layer.alert("iframe传回来的值:"+JSON.stringify(data));
  ModuleData.attrList.splice(index,1);
  ModuleData.attrList.push(data);
  generate_AttrList();
  _dialog.close();
  });
  return false;
  },
  cancelValue:"取消",
  cancel:function(){
   
  }
  });
  }
  var _disableAttr=function(index){
  // 默认值
  var __ids="newAttrWin"+Math.random();
  __ids=__ids.replace("[.]+","");
  ModuleData.attrList[index]["enabled"]=false;
  generate_AttrList();
  }
  </script>
  <script type="text/javascript">
  //处理逻辑
   
  function getParaidVal(){
  return $("#txt_id").val();
  }
  function getParanameVal(){
  return $("#txt_name").val();
  }
  function getParalogoVal(){
  return $("#txt_logo").val();
  }
  function getParamemoVal(){
  return $("#txt_memo").val();
  }
  function getParaordersVal(){
  return $("#txt_orders").val();
  }
  function getParaenabledVal(){
  return $("#cbox_enabled").val();
  }
  var __isAllow=true;
  var str_id = "";
  var str_name = "";
  var str_logo = "";
  var str_memo = "";
  var str_orders = "";
  var str_enabled = "";
  var tips_id = jQuery("span[tipsfor='id']");
  var tips_name = jQuery("span[tipsfor='name']");
  var tips_logo = jQuery("span[tipsfor='logo']");
  var tips_memo = jQuery("span[tipsfor='memo']");
  var tips_orders = jQuery("span[tipsfor='orders']");
  var tips_enabled = jQuery("span[tipsfor='enabled']");
  var tips_attrList=$("span[tipsfor='attrList']");
  //--id验证
  var validateParameter_id=function(){
  str_id = "";
  str_id = getParaidVal();
  SetSuccessTips(tips_id,' ');
  if(util.checkEmpty(str_id)){
  SetErrorTips(tips_id,"必须填写【id】");
  __isAllow=false;
  }
  if(!util.checkEmpty(str_id)&&!util.isInteger(str_id)){
  SetErrorTips(tips_id,'【id】必须是整数!');
  __isAllow=false;
  }
  }
  //--name验证
  var validateParameter_name=function(){
  str_name = "";
  str_name = getParanameVal();
  SetSuccessTips(tips_name,' ');
  if(util.checkEmpty(str_name)){
  SetErrorTips(tips_name,"必须填写模型名称");
  __isAllow=false;
  }
  }
  //--logo验证
  var validateParameter_logo=function(){
  str_logo = "";
  str_logo = getParalogoVal();
  SetSuccessTips(tips_logo,' ');
  if(!util.checkEmpty(str_logo)&&!util.isURL(str_logo)){
  SetErrorTips(tips_logo,'logo格式错误,请填写正确URL地址!');
  __isAllow=false;
  }
  }
  //--memo验证
  var validateParameter_memo=function(){
  str_memo = "";
  str_memo = getParamemoVal();
  SetSuccessTips(tips_memo,' ');
  }
  //--orders验证
  var validateParameter_orders=function(){
  str_orders = "";
  str_orders = getParaordersVal();
  SetSuccessTips(tips_orders,' ');
  if(!util.checkEmpty(str_orders)&&!util.isInteger(str_orders)){
  SetErrorTips(tips_orders,'排序必须是整数!');
  __isAllow=false;
  }
  }
  //--enabled验证
  var validateParameter_enabled=function(){
  str_enabled = "";
  str_enabled = getParaenabledVal();
  SetSuccessTips(tips_enabled,' ');
  if(!util.checkEmpty(str_enabled)&&!util.isBoolean(str_enabled)){
  SetErrorTips(tips_enabled,'是否启用必须是布尔值!');
  __isAllow=false;
  }
  }
   
   
  //--一次性验证
  var validateAll=function(){
  __isAllow=true;
  validateParameter_id();
  validateParameter_name();
  validateParameter_logo();
  validateParameter_memo();
  validateParameter_orders();
  validateParameter_enabled();
  return __isAllow;
  }
   
  $("#dosubmit").click(function(){
  if(!validateAll()){
  layer.alert("表单填写格式有误,请按照提示填写。",3);
  return false;
  }
  var str_json=JSON.stringify(ModuleData.attrList);
  $("#txt_json").val(str_json);
   
   
  //--提交到服务端处理
  art_ajax_json_dialog("ajax_edit.jspx", "post", jQuery("#myform").serialize(), function (data) {
  if (data.status == false) {
  layer.msg(data.message, 1, 3);
  return;
  }
  else {
  layer.msg(data.message, 1, 1);
  return;
  }
  });
  });
  </script>
  <script type="text/javascript">
  $(document).ready(function(){
  generate_AttrList();
  var str_json=JSON.stringify(ModuleData.attrList);
  $("#txt_json").val(str_json);
  $("dosaveattr").click(function(){
  var str_json=JSON.stringify(ModuleData.attrList);
  $("#txt_json").val(str_json);
  if(ModuleData.attrList.length<=0){
  layer.alert("属性列表为空!",3);
  return;
  }
  art_ajax_json_dialog("ajax_attrHandler.jspx", "post", jQuery("#form_attr").serialize(), function (data) {
  if (data.status == false) {
  layer.msg(data.message, 1, 3);
  return;
  }
  else {
  layer.msg(data.message, 1, 1);
  setTimeout(function(){
  location.reload();
  });
  return;
  }
  });
   
  });
  });
  </script>
  </body>
  </html>
   
   
   
   
   
   
 

   
   
   
   
   
   
   
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7"/>
  <title>
  属性编辑
  </title>
   
  <link href="/static/style/user/css/reset.css"rel="stylesheet"type="text/css" />
  <link href="/static/style/user/css/zh-cn-system.css"rel="stylesheet"type="text/css"
/>
  <link href="/static/style/user/css/table_form.css"rel="stylesheet"type="text/css"
/>
  <link href="/static/style/admin/component.css"rel="stylesheet"type="text/css" />
   
  <script type="text/javascript" src="/static/lib/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="/static/lib/jquery.cookie.min.js"></script>
  <script type="text/javascript" src="/static/lib/util.min.js"></script>
  <script type="text/javascript" src="/static/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="/static/lib/jshashtable.min.js"></script>
  <script type="text/javascript" src="/static/lib/json2.js"></script>
  <!--弹出窗口插件-->
  <link rel="stylesheet" href="/static/UI/artdialog/skins/blue.css" />
  <script type="text/javascript" src="/static/UI/artdialog/artDialog.js"></script>
  <script type="text/javascript" src="/static/UI/artdialog/plugins/iframeTools.js"></script>
  <script type="text/javascript" src="/static/UI/artdialog/artDialog.ex.js"></script>
  <!--分页插件-->
  <link href="/static/UI/myPagination/css/page.css"rel="stylesheet"type="text/css"
/>
  <script src="/static/UI/myPagination/js/jquery.myPagination5.0.js"type="text/javascript"></script>
   
  <!--日期-->
  <script language="javascript" type="text/javascript"src="/static/UI/dataPicker/WdatePicker.js"></script>
  <!--邮箱自动提示-->
  <script type="text/javascript" src="/static/UI/mailTip/jquery.mailtip.min.js"></script>
  <link type="text/css" rel="stylesheet"href="/static/UI/mailTip/mailtip.min.css"/>
  <!--颜色选择-->
  <script type="text/javascript" src="/static/UI/colorPicker/farbtastic.min.js"></script>
  <link rel="stylesheet" href="/static/UI/colorPicker/farbtastic.min.css"type="text/css"
/>
  <!--数字选择器-->
  <script type="text/javascript" src="/static/UI/numberSelector/index.min.js"></script>
  <link href="/static/UI/numberSelector/number_selector.min.css"type="text/css"rel="stylesheet"/>
  <!--邮箱输入框-->
  <script type="text/javascript" src="/static/UI/mailTip/jquery.mailtip.min.js"></script>
  <link type="text/css" rel="stylesheet"href="/static/UI/mailTip/mailtip.min.css"/>
  <!--引入表单验证插件-->
  <!--密码强度判断-->
  <link href="/static/UI/password_strength/style/css/password_strength.min.css"rel="stylesheet"type="text/css"
/>
  <script type="text/javascript" src="/static/UI/password_strength/js/jquery.passwordStrength.min.js"></script>
  <script type="text/javascript" src="/static/UI/easisvalidator/js/easis.validator.min.js"></script>
  <link href="/static/UI/easisvalidator/css/validate2.css"rel="stylesheet"type="text/css"
/>
  <!--图片预览框-->
  <script type="text/javascript" src="/static/UI/imgBox/imgPreviewBox.min.js"></script>
  <script src="/static/SUI/filemgr/interface.js"></script>
  <!--ueditor-->
  <!-- 配置文件 -->
  <script type="text/javascript" src="/static/UI/ueditor/ueditor.config.js"></script>
  <!-- 编辑器源码文件 -->
  <script type="text/javascript" src="/static/UI/ueditor/ueditor.all.js"></script>
  <!-- 语言包文件(建议手动加载语言包,避免在ie下,因为加载语言失败导致编辑器加载失败) -->
  <script type="text/javascript" src="/static/UI/ueditor/lang/zh-cn/zh-cn.js"></script>
  <!--layer1.8-->
  <script type="text/javascript" src="/static/UI/layer1.8/layer/layer.min.js"></script>
  <!--前台页面全局js-->
  <script type="text/javascript" src="/static/action/admin/admin.all.js"></script>
  <style type="text/css">html{_overflow-y:scroll}</style>
  </head>
  <body>
   
  <div class="pad-10">
  <form action="" method="post"
id
="myform">
   
  <table width="100%" class="table_form">
  <tr>
  <th width="80">名称(中文):</th>
  <td class="y-bg">
  <input id="txt_name" type="text"class="input-text"size="30"
name="model.name" value="" />
  <span tipsfor="name"></span><!--tips for name-->
  </td>
  </tr>
   
   
  <tr>
  <th width="80">名称(英文):</th>
  <td class="y-bg">
  <input id="txt_attrName" type="text"class="input-text"size="30"
name="model.attrName"value="" />
  <span tipsfor="attrName"></span><!--tips for attrName-->
  </td>
  </tr>
   
   
  <tr>
  <th width="80">填写提示:</th>
  <td class="y-bg">
  <input id="txt_tips" type="text"class="input-text"size="30"
name="model.tips" value="" />
  <span tipsfor="tips"></span><!--tips for tips-->
  </td>
  </tr>
   
   
  <tr>
  <th width="80">选择类型:</th>
  <td class="y-bg">
  <select id="sel_chooseType">
  <option value="1">单项选择</option>
  <option value="2">多项选择</option>
  <option value="3">手写输入</option>
  </select>
  <span tipsfor="chooseType"></span><!--tips for chooseType-->
  </td>
  </tr>
   
   
  <tr>
  <th width="80">属性类型:</th>
  <td class="y-bg">
  <select id="sel_attrType">
  <option value="1">sku属性</option>
  <option value="2">普通展示属性</option>
  </select>
  <span tipsfor="attrType"></span><!--tips for attrType-->
  </td>
  </tr>
  <tr>
  <th width="80">排序:</th>
  <td class="y-bg">
  <input id="txt_orders" type="text"class="input-text"size="30"
name="model.orders"value="0" />
  <span tipsfor="orders"></span><!--tips for orders-->
  </td>
  </tr>
  <tr>
  <th width="80">其他设置:</th>
  <td class="y-bg">
  <input type="checkbox" id="cbox_isRequired"value="true"name="model.isRequired">必填
  <input id="cbox_usedInSearch" type="checkbox"name="model.usedInSearch"value="true" />用于搜索
  <input id="cbox_enabled" type="checkbox"value="true" />启用
  <span tipsfor="enabled"></span><!--tips for enabled-->
  </td>
  </tr>
  </table>
  <div class="bk15"></div>
  <!--单选设定-->
  <div id="panel_single_select_settings"
style
="display: none;">
  <fieldset>
  <legend>单项选择具体设定</legend>
  <table width="100%" class="table_form">
  <tr>
  <th width="80">设置:</th>
  <td class="y-bg">
  <input type="checkbox" id="cbox_single_isColor"value="true">颜色
  <input type="checkbox" id="cbox_single_imgAllowed"value="true">图片上传
  <span tipsfor="single_isColor"></span><!--tips for single_isColor-->
  </td>
  </tr>
  <tr>
  <th width="80">选项列表:</th>
  <td class="y-bg">
  <input type="button" class="button"value="添加选项"onclick="javascript:_addOption('single');">
  </td>
  </tr>
  <tr>
  <th width="80">&nbsp;</th>
  <td class="y-bg">
  <div class="attach_list">
  <ul id="singleOptions">
  <li class="voteitem"><b>这是什么呢</b><bclass=" deletable"></b><bclass="editable"></b></li>
  </ul>
  </div>
  </td>
  </tr>
  </table>
  </fieldset>
  <div class="bk15"></div>
  </div>
  <!--多选设定-->
  <div id="panel_muti_select_settings" style="display: none;">
  <fieldset>
  <legend>多项选择具体设定</legend>
  <table width="100%" class="table_form">
   
  <tr>
  <th width="80">最多选择:</th>
  <td class="y-bg">
  <select id="sel_muti_maxSelected">
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="4">5</option>
  </select>
  <span tipsfor="muti_maxSelected"></span><!--tips for muti_maxSelected-->
  </td>
  </tr>
  <tr>
  <th width="80">选项列表:</th>
  <td class="y-bg">
  <input type="button" class="button"value="添加选项"onclick="_addOption('muti');">
  </td>
  </tr>
  <tr>
  <th width="80">&nbsp;</th>
  <td class="y-bg">
  <div class="attach_list">
  <ul id="mutiOptions">
   
  </ul>
  </div>
   
  </td>
  </tr>
  </table>
  </fieldset>
  <div class="bk15"></div>
  </div>
   
  <!--手写设定-->
  <div id="panel_input_settings" style="display: none;">
  <fieldset>
  <legend>手写具体设定</legend>
  <table width="100%" class="table_form">
  <tr>
  <th width="80">ui类型:</th>
  <td class="y-bg">
  <select id="sel_uiType">
  <option value="1">普通字符串</option>
  <option value="2">日期</option>
  <option value="3">图片</option>
  <option value="4">整数</option>
  <option value="5">小数</option>
  <option value="6">URL网址</option>
  </select>
  <span tipsfor="input_uiType"></span><!--tips for input_uiType-->
  </td>
  </tr>
  </table>
  </fieldset>
  <div class="bk15"></div>
  </div>
   
   
  <input type="button" style="display: none;"class="button"id="dosubmit"
name="dosubmit"value="保存资料"/>
  </form>
  </div>
  <script type="text/javascript">
  //处理逻辑
   
   
  function getParanameVal(){
  return $("#txt_name").val();
  }
  function getParaattrNameVal(){
  return $("#txt_attrName").val();
  }
  function getParatipsVal(){
  return $("#txt_tips").val();
  }
  function getParachooseTypeVal(){
  return $("#sel_chooseType option:selected").val();
  }
  function getParaattrTypeVal(){
  return $("#sel_attrType option:selected").val();
  }
   
  function getParaordersVal(){
  return $("#txt_orders").val();
  }
  var __isAllow=true;
  var str_id = "";
  var str_moduleid = "";
  var str_name = "";
  var str_attrName = "";
  var str_tips = "";
  var str_chooseType = "";
  var str_attrType = "";
  var str_isRequired = "";
  var str_usedInSearch = "";
  var str_isMain = "";
  var str_orders = "";
  var str_single_isColor = "";
  var str_single_imgAllowed = "";
  var str_muti_maxSelected = "";
  var str_input_uiType = "";
  var str_enabled = "";
   
  var tips_name = jQuery("span[tipsfor='name']");
  var tips_attrName = jQuery("span[tipsfor='attrName']");
  var tips_tips = jQuery("span[tipsfor='tips']");
  var tips_chooseType = jQuery("span[tipsfor='chooseType']");
  var tips_attrType = jQuery("span[tipsfor='attrType']");
  var tips_orders = jQuery("span[tipsfor='orders']");
  var tips_enabled = jQuery("span[tipsfor='enabled']");
   
   
  //--name验证
  var validateParameter_name=function(){
  str_name = "";
  str_name = getParanameVal();
  SetSuccessTips(tips_name,' ');
  if(util.checkEmpty(str_name)){
  SetErrorTips(tips_name,"必须填写名称(中文)");
  __isAllow=false;
  }
  }
  //--attrName验证
  var validateParameter_attrName=function(){
  str_attrName = "";
  str_attrName = getParaattrNameVal();
  SetSuccessTips(tips_attrName,' ');
  if(util.checkEmpty(str_attrName)){
  SetErrorTips(tips_attrName,"必须填写名称(英文)");
  __isAllow=false;
  }
  }
  //--tips验证
  var validateParameter_tips=function(){
  str_tips = "";
  str_tips = getParatipsVal();
  SetSuccessTips(tips_tips,' ');
  }
  //--chooseType验证
  var validateParameter_chooseType=function(){
  str_chooseType = "";
  str_chooseType = getParachooseTypeVal();
  SetSuccessTips(tips_chooseType,' ');
  if(util.checkEmpty(str_chooseType)){
  SetErrorTips(tips_chooseType,"必须填写选择类型");
  __isAllow=false;
  }
  if(!util.checkEmpty(str_chooseType)&&!util.isInteger(str_chooseType)){
  SetErrorTips(tips_chooseType,'选择类型必须是整数!');
  __isAllow=false;
  }
  }
  //--attrType验证
  var validateParameter_attrType=function(){
  str_attrType = "";
  str_attrType = getParaattrTypeVal();
  SetSuccessTips(tips_attrType,' ');
  if(util.checkEmpty(str_attrType)){
  SetErrorTips(tips_attrType,"必须填写属性类型");
  __isAllow=false;
  }
  if(!util.checkEmpty(str_attrType)&&!util.isInteger(str_attrType)){
  SetErrorTips(tips_attrType,'属性类型必须是整数!');
  __isAllow=false;
  }
  }
   
  //--orders验证
  var validateParameter_orders=function(){
  str_orders = "";
  str_orders = getParaordersVal();
  SetSuccessTips(tips_orders,' ');
  if(util.checkEmpty(str_orders)){
  SetErrorTips(tips_orders,"必须填写排序");
  __isAllow=false;
  }
  if(!util.checkEmpty(str_orders)&&!util.isInteger(str_orders)){
  SetErrorTips(tips_orders,'排序必须是整数!');
  __isAllow=false;
  }
  }
   
   
   
  //--一次性验证
  var validateAll=function(){
  __isAllow=true;
   
  validateParameter_name();
  validateParameter_attrName();
  validateParameter_tips();
  validateParameter_chooseType();
  validateParameter_attrType();
  validateParameter_orders();
  return __isAllow;
  }
   
  </script>
  <script type="text/javascript">
  //--数据区域。该模型的所有数据。
  var AttrData={
  id:0,//数据库的id
  moduleid:0,//数据库对应的模型id。
  name:"",//属性名称,中文名称。
  attrName:"",//属性的英文名称,用于方便提交表单时候进行相关操作。请注意,同一个模型里面不能有相同的属性名称。
  tips:"",//属性填写提示。
  chooseType:1,//选择类型,1:单选,2:多选,3:手写输入
  attrType:1,//属性类型,1、sku属性,2、普通展示属性。
  isRequired:true,//是否必须填写或选择。
  usedInSearch:true,//是否在搜索里面使用。
  enabled:true,//该属性是否启用。
  isMain:false,//是否主要的sku属性。只有在单选及手写情况下,才可能是sku。还有,手写时候,没办法设置为搜索属性。
  orders:0,//该属性的排位。
  /*single 单选系列参数*/
  single_isColor:false,
  single_imgAllowed:false,
  /*单选参数结束*/
  /*多选系列参数*/
  muti_maxSelected:0,
  /*多选参数结束*/
  /*手动输入系列参数*/
  input_uiType:0,
  /*手动输入参数结束*/
  /*共用,选择类型的option*/
  options:[] //里面的item为:{id:0,name:"",orders:"",color:"",enabled:false}
  /*option结束*/
  /*
   
  Single:{
  isColor:false,//是否颜色值。
  imgAllowed:false,//该属性是否运行添加图片。
  SingleOptions:[]//里面的item为:{id:0,name:"",orders:"",color:"",enabled:false}
  },//单选的相关属性。
  Muti:{
  maxSelected:2,//2-5,最大选择个数。
  MutiOptions:[] //里面的item为:{id:0,name:"",orders:""}
  },
  Input:{
  uiType:1 //手写输入的UI形式。 value="1" 普通字符串 value="2" 日期 value="3" 图片 value="4" 整数 value="5" 小数 value="6" URL网址
  } ,
  DeletedArr:[]*/
  };
  //--初始化自定义表单里面的编辑区域。
  var panel_single_select_settings=$("#panel_single_select_settings");
  var panel_muti_select_settings=$("#panel_muti_select_settings");
  var panel_input_settings=$("#panel_input_settings");
  //--变换为单选设定
  function chage2SingleSetting(){
  panel_muti_select_settings.css("display","none");
  panel_input_settings.css("display","none");
  panel_muti_select_settings.find("select option:selected").each(function(){
  $(this).removeAttr("selected");
  });
  panel_input_settings.find("select option:selected").each(function(){
  $(this).removeAttr("selected");
  });
  panel_single_select_settings.css("display","block");
  }
  function chage2MutiSelectSetting(){
  panel_single_select_settings.css("display","none");
  panel_input_settings.css("display","none");
  panel_single_select_settings.find("input:checked").each(function(){
  $(this).removeAttr("checked");
  });
  panel_input_settings.find("select option:selected").each(function(){
  $(this).removeAttr("selected");
  });
  panel_muti_select_settings.css("display","block");
  }
  function chage2InputSetting(){
  panel_muti_select_settings.css("display","none");
  panel_single_select_settings.css("display","none");
  panel_single_select_settings.find("input:checked").each(function(){
  $(this).removeAttr("checked");
  });
  panel_muti_select_settings.find("select option:selected").each(function(){
  $(this).removeAttr("selected");
  });
  panel_input_settings.css("display","block");
  }
  function change2Status_singleSelect(){
  //单选
   
  $("#sel_attrType").removeAttr("disabled");
  $("#sel_attrType option").each(function(){
  $(this).removeAttr("disabled");
  $(this).removeAttr("selected");
  });
  $("#cbox_isRequired").attr("checked","checked").attr("disabled","disabled");
  $("#cbox_usedInSearch").removeAttr("disabled");
  //$("#cbox_single_isColor").removeAttr("checked");
  //$("#cbox_single_imgAllowed").removeAttr("checked");
  singleoption_genTpl();
  }
  function singleoption_genTpl(){
  var arr2=AttrData.options.sort(function(a,b){
  var _a_orders=(a["enabled"]?0:1)*9999+parseInt(a.orders);
  var _b_orders=(b["enabled"]?0:1)*9999+parseInt(b.orders);
  return _a_orders-_b_orders;
  });
  AttrData.options=arr2;
  var html=[];
  for(var i=0;i<AttrData.options.length;i++){
  var item=AttrData.options[i];
   
  var _str_item="";
  //'<li arrindex="'+i+'" attrid="'+item["id"]+'" attrname="'+item["name"]+'" attrorders="'+item["orders"]+'" attrcolor="'+item["color"]+'"><span class="option_text">'+item["name"]+'(排序:'+item["orders"]+')</span>' +
  //'<a onclick="javascript:editSingleSelectOption(this);">编辑</a><a onclick="javascript:deleteSingleSelectOption(this);" >删除</a></li>';
  if(item["enabled"]==false){
  _str_item='<li class="lightitem_"><span style="color:#333333;font-style:italic;">'+item["name"]+'(禁用)</span><b onclick="_disableOption('+i+',\'single\');" class=" deletable"></b><b onclick="_editOption('+i+',\'single\');" class="editable"></b></li>';
  }
  else{
  _str_item='<li class="lightitem"><span style="">'+item["name"]+'</span><b onclick="_disableOption('+i+',\'single\');" class=" deletable" ></b><b onclick="_editOption('+i+',\'single\');" class="editable"></b></li>';
  }
   
   
  html.push(_str_item);
  }
  $("#singleOptions").html(html.join(""));
  }
  function mutioption_genTpl(){
  var arr2=AttrData.options.sort(function(a,b){
  var _a_orders=(a["enabled"]?0:1)*9999+parseInt(a.orders);
  var _b_orders=(b["enabled"]?0:1)*9999+parseInt(b.orders);
  return _a_orders-_b_orders;
  });
  AttrData.options=arr2;
  var html=[];
  for(var i=0;i<AttrData.options.length;i++){
  var item=AttrData.options[i];
  var _str_item="";
  //'<li arrindex="'+i+'" attrid="'+item["id"]+'" attrname="'+item["name"]+'" attrorders="'+item["orders"]+'" attrcolor="'+item["color"]+'"><span class="option_text">'+item["name"]+'(排序:'+item["orders"]+')</span>' +
  //'<a onclick="javascript:editSingleSelectOption(this);">编辑</a><a onclick="javascript:deleteSingleSelectOption(this);" >删除</a></li>';
  if(item["enabled"]==false){
  _str_item='<li class="lightitem_"><span style="color:#333333;font-style:italic;">'+item["name"]+'(禁用)</span><b onclick="_disableOption('+i+',\'muti\');" class=" deletable"></b><b onclick="_editOption('+i+',\'muti\');" class="editable"></b></li>';
  }
  else{
  _str_item='<li class="lightitem"><span style="">'+item["name"]+'</span><b onclick="_disableOption('+i+',\'muti\');" class=" deletable"></b><b onclick="_editOption('+i+',\'muti\');" class="editable"></b></li>';
  }
   
  html.push(_str_item);
  }
  $("#mutiOptions").html(html.join(""));
  }
  function change2Status_mutiSelect(){
  //-多选。
  $("#cbox_isRequired").removeAttr("checked").removeAttr("disabled");
  $("#sel_attrType").attr("disabled","disabled");
  $("#sel_attrType option").each(function(){
  $(this).removeAttr("selected");
  var __val=$(this).val();
  if(__val=="2"){
  $(this).attr("selected","selected");
  }
  });
  //$("#sel_muti_maxSelected option").removeAttr("selected");
  $("#cbox_usedInSearch").removeAttr("checked").attr("disabled","disabled");
  mutioption_genTpl();
  }
  function change2Status_input(){
  //-手写。
  $("#cbox_isRequired").removeAttr("checked").removeAttr("disabled");
  $("#sel_attrType").removeAttr("disabled");
   
  /*$("#sel_attrType option").each(function(){
  $(this).removeAttr("selected");
  var __val=$(this).val();
  if(__val=="2"){
  $(this).attr("selected","selected");
  }
  }); */
  $("#cbox_usedInSearch").removeAttr("checked").attr("disabled","disabled");
  //$("#sel_uiType option").removeAttr("selected");
  }
  function PageInit(data){
  if(data!=undefined){
  AttrData=data;
  }
  var __needInit=true;
  //--从数据里面初始化相关状态数据。
  function initPanelOfEditAttr(){
  $("#txt_name").val(AttrData.name);
  $("#txt_attrName").val(AttrData.attrName);
  $("#txt_orders").val(AttrData.orders);
  if(AttrData.isRequired){
  $("#cbox_isRequired").attr("checked","checked");
  }
  else{
  $("#cbox_isRequired").removeAttr("checked");
  }
  if(AttrData.usedInSearch){
  $("#cbox_usedInSearch").attr("checked","checked");
  }
  else{
  $("#cbox_usedInSearch").removeAttr("checked");
  }
  if(AttrData.single_isColor){
  $("#cbox_single_isColor").attr("checked","checked");
  }
  else{
  $("#cbox_single_isColor").removeAttr("checked");
  }
  if(AttrData.single_imgAllowed){
  $("#cbox_single_imgAllowed").attr("checked","checked");
  }
  else{
  $("#cbox_single_imgAllowed").removeAttr("checked");
  }
  if(AttrData.enabled){
  $("#cbox_enabled").attr("checked","checked");
  }
  else{
  $("#cbox_enabled").removeAttr("checked");
  }
  $("#sel_chooseType").val(AttrData.chooseType);
  $("#sel_attrType").val(AttrData.attrType);
  $("#sel_muti_maxSelected").val(AttrData.muti_maxSelected);
  $("#sel_uiType").val(AttrData.input_uiType);
  $("#txt_tips").val(AttrData.tips);
  if(AttrData.chooseType=="1"){
  chage2SingleSetting();
  change2Status_singleSelect();
  }
  else if(AttrData.chooseType=="2"){
  chage2MutiSelectSetting();
  change2Status_mutiSelect();
  }
  else if(AttrData.chooseType=="3"){
  chage2InputSetting();
  change2Status_input();
  }
  if(__needInit){
  $("#sel_chooseType").change(function(){
  var __this=this;
  setTimeout(function(){
  var __val=$(__this).find("option:selected").val();
  if(__val=="1"){
  chage2SingleSetting();
  change2Status_singleSelect();
  }
  else if(__val=="2"){
  //多选
  chage2MutiSelectSetting();
  change2Status_mutiSelect();
  }
  else if(__val=="3"){
  //手写
  chage2InputSetting();
  change2Status_input();
  }
  },1);
  });
  __needInit=false;
  }
  }
  initPanelOfEditAttr();
  }
  function saveInfo(func_callBack){
  if(!validateAll()){
  layer.alert("表单填写格式有误,请按照提示填写。",3);
  return false;
  }
  //--第二个验证。
  AttrData.name=getParanameVal();
  AttrData.attrName=getParaattrNameVal();
  AttrData.tips= getParatipsVal();
  AttrData.orders=isNaN(parseInt(getParaordersVal()))?0:parseInt(getParaordersVal());
  AttrData.enabled=$("#cbox_enabled").attr("checked")?true:false;
  var _para_chooseType= parseInt($("#sel_chooseType option:selected").val());
  if(_para_chooseType===1){
  //-单项选择。
  AttrData.chooseType=1;
  var _para_attrType=parseInt($("#sel_attrType option:selected").val());
  AttrData.isRequired=true;
  if(_para_attrType===1){
  AttrData.attrType=1; //sku属性
  }
  else{
  AttrData.attrType=2;//普通展示属性。
  }
  var _para_usedInSearch=$("#cbox_usedInSearch").attr("checked")?true:false;
  AttrData.usedInSearch=_para_usedInSearch;
  //AttrData.options=[];
  AttrData.muti_maxSelected=0;
  AttrData.input_uiType=0;
  AttrData.single_imgAllowed =$("#cbox_usedInSearch").attr("checked")?true:false;
  AttrData.single_isColor=$("#cbox_usedInSearch").attr("checked")?true:false;
   
  }
  else if(_para_chooseType===2){
  //-多项选择。
  AttrData.chooseType=2;
  AttrData.attrType=2;//普通展示属性。
  AttrData.usedInSearch=false;
  var _para_isRequired=$("#cbox_isRequired").attr("checked")?true:false;
  AttrData.isRequired=_para_isRequired;
  //--清空其他值。
  AttrData.input_uiType=0;
  AttrData.single_imgAllowed =false;
  AttrData.single_isColor=false;
  AttrData.muti_maxSelected=parseInt($("#sel_muti_maxSelected option:selected").val());
  if(AttrData.options.length<AttrData.muti_maxSelected){
  layer.alert("请添加"+AttrData.muti_maxSelected+"个或以上选项。");
  return false;
  }
  }
  else if(_para_chooseType===3){
  //-手动输入
  AttrData.chooseType=3;
  AttrData.attrType=parseInt($("#sel_attrType option:selected").val());//普通展示属性。
  AttrData.usedInSearch=false;
  var _para_isRequired=$("#cbox_isRequired").attr("checked")?true:false;
  AttrData.isRequired=_para_isRequired;
  AttrData.single_imgAllowed =false;
  AttrData.single_isColor=false;
  AttrData.muti_maxSelected=0;
  AttrData.input_uiType=parseInt($("#sel_uiType option:selected").val());
  }
  else{
  layer.alert("系统无法获得正确的选择类型!");
  return false;
  }
  // console.log(AttrData);
  //
  if(func_callBack!=undefined){
  func_callBack(AttrData);
  }
  else{
  layer.alert("字符串格式化为:"+JSON.stringify(AttrData)+"需要删除的字符串:");
  }
   
  return;
  }
  $("#dosubmit").click(function(){
  saveInfo();
  });
  PageInit();
   
  </script>
  <script type="text/javascript">
  //第三部分script
  var _optionTpl=[];
  _optionTpl.push(" <fieldset>");
  _optionTpl.push(" <legend>基本信息</legend>");
  _optionTpl.push(" <table width=\"100%\" class=\"table_form\">");
  _optionTpl.push(" <tr>");
  _optionTpl.push(" <th width=\"80\">名称:</th>");
  _optionTpl.push(" <td class=\"y-bg\">");
  _optionTpl.push(" <input id=\"_txt_name\" type=\"text\" class=\"input-text\" size=\"30\" name=\"model.name\" value=\"\" />");
  _optionTpl.push(" <span tipsfor=\"_name\"></span>");
  _optionTpl.push(" </td>");
  _optionTpl.push(" </tr>");
  _optionTpl.push(" ");
  _optionTpl.push(" <tr id='row_color'>");
  _optionTpl.push(" <th width=\"80\">颜色:</th>");
  _optionTpl.push(" <td class=\"y-bg\">");
  _optionTpl.push(" <input id=\"_txt_color\" type=\"text\" class=\"input-text\" size=\"30\" name=\"model.color\" value=\"\" />");
  _optionTpl.push(" <span tipsfor=\"_color\"></span>");
  _optionTpl.push(" </td>");
  _optionTpl.push(" </tr>");
  _optionTpl.push(" ");
  _optionTpl.push(" <tr>");
  _optionTpl.push(" <th width=\"80\">排序:</th>");
  _optionTpl.push(" <td class=\"y-bg\">");
  _optionTpl.push(" <input id=\"_txt_orders\" type=\"text\" class=\"input-text\" size=\"30\" name=\"model.orders\" value=\"0\" />");
  _optionTpl.push(" <span tipsfor=\"_orders\"></span>");
  _optionTpl.push(" </td>");
  _optionTpl.push(" </tr>");
  _optionTpl.push(" <tr><th width=\"80\">启用:</th>");
  _optionTpl.push(" <td class=\"y-bg\">");
  _optionTpl.push(" <input id=\"_cbox_enabled\" type=\"checkbox\" name=\"model.enabled\" checked='checked' value=\"true\" />");
  _optionTpl.push(" <span tipsfor=\"_enabled\"></span></td></tr>");
  _optionTpl.push(" </table>");
  _optionTpl.push(" </fieldset>");
  function _addOption(SingleOrMuti){
  var dialog1= art.dialog({
  title:"添加选项",
  content:_optionTpl.join(""),
  width:500,
  lock:true,
  init:function(){
  if(SingleOrMuti=="muti"){
  $("#row_color").css("display","none");
  }
  },
  ok:function(){
  //--验证。
  var __isAllow=true;
  var tips_name = jQuery("span[tipsfor='_name']");
  var tips_color = jQuery("span[tipsfor='_color']");
  var tips_orders = jQuery("span[tipsfor='_orders']");
  var tips_enabled = jQuery("span[tipsfor='_enabled']");
  //--name验证
  var validateParameter_name=function(){
  var __str_tmp = $("#_txt_name").val();
  SetSuccessTips(tips_name,' ');
  if(util.checkEmpty(__str_tmp)){
  SetErrorTips(tips_name,"必须填写名称");
  __isAllow=false;
  }
  }
  //--color验证
  var validateParameter_color=function(){
  var __str_tmp = $("#_txt_color").val();
  SetSuccessTips(tips_color,' ');
  if(!util.checkEmpty(__str_tmp)&&!util.isColor(__str_tmp)){
  SetErrorTips(tips_color,'颜色格式错误!');
  __isAllow=false;
  }
  }
  //--orders验证
  var validateParameter_orders=function(){
  var __str_tmp = $("#_txt_orders").val();
  SetSuccessTips(tips_orders,' ');
  if(!util.checkEmpty(__str_tmp)&&!util.isInteger(__str_tmp)){
  SetErrorTips(tips_orders,'排序必须是整数!');
  __isAllow=false;
  }
  }
  var validateParameter_enabled=function(){
  var __str_tmp = $("#txt_enabled").val();
  SetSuccessTips(tips_enabled,' ');
  if(!util.checkEmpty(__str_tmp)&&!util.isBoolean(__str_tmp)){
  SetErrorTips(tips_enabled,'启用必须是布尔值!');
  __isAllow=false;
  }
  }
  //--一次性验证
   
  __isAllow=true;
   
  validateParameter_name();
  if(SingleOrMuti=="single"){
  validateParameter_color();
  }
  validateParameter_orders();
  validateParameter_enabled();
  if(__isAllow==false){
  layer.alert("表单填写失误。。");
  return false;
  }
   
  //--保存相关资料
  if(SingleOrMuti=="single"){
  AttrData.options.push({
  id:0,
  name:$("#_txt_name").val(),
  color:$("#_txt_color").val(),
  orders:isNaN(parseInt($("#_txt_orders").val()))?0:parseInt($("#_txt_orders").val()),
  enabled:$("#_cbox_enabled").attr("checked")?true:false
  }) ;
  singleoption_genTpl();
  dialog1.close();
  }
  else{
  AttrData.options.push({
  id:0,
  name:$("#_txt_name").val(),
  color:'',
  orders:isNaN(parseInt($("#_txt_orders").val()))?0:parseInt($("#_txt_orders").val()),
  enabled:$("#_cbox_enabled").attr("checked")?true:false
  }) ;
  mutioption_genTpl();
  dialog1.close();
   
  }
   
  return false;
  },
  okVal:"添加",
  cancel:function(){},
  cancelVal:"取消"
  });
  }
   
  function _editOption(index,SingleOrMuti){
  var _item=[];
  if(SingleOrMuti=="single"){
  _item=AttrData.options[index];
  }
  else{
  _item=AttrData.options[index];
  }
  var dialog1= art.dialog({
  title:"编辑选项",
  content:_optionTpl.join(""),
  width:500,
  lock:true,
  init:function(){
  if(SingleOrMuti=="muti"){
  $("#row_color").css("display","none");
  }
  //--初始化。
  $("#_txt_name").val(_item["name"]);
  $("#_txt_orders").val(_item["orders"]);
  $("#_txt_color").val(_item["color"]);
  if(_item["enabled"]==true){
  $("#_cbox_enabled").attr("checked",true);
  }
  else{
  $("#_cbox_enabled").removeAttr("checked");
  }
   
  },
  ok:function(){
  //--验证。
  var __isAllow=true;
  var tips_name = jQuery("span[tipsfor='_name']");
  var tips_color = jQuery("span[tipsfor='_color']");
  var tips_orders = jQuery("span[tipsfor='_orders']");
  var tips_enabled = jQuery("span[tipsfor='_enabled']");
  //--name验证
  var validateParameter_name=function(){
  var __str_tmp = $("#_txt_name").val();
  SetSuccessTips(tips_name,' ');
  if(util.checkEmpty(__str_tmp)){
  SetErrorTips(tips_name,"必须填写名称");
  __isAllow=false;
  }
  }
  //--color验证
  var validateParameter_color=function(){
  var __str_tmp = $("#_txt_color").val();
  SetSuccessTips(tips_color,' ');
  if(!util.checkEmpty(__str_tmp)&&!util.isColor(__str_tmp)){
  SetErrorTips(tips_color,'颜色格式错误!');
  __isAllow=false;
  }
  }
  //--orders验证
  var validateParameter_orders=function(){
  var __str_tmp = $("#_txt_orders").val();
  SetSuccessTips(tips_orders,' ');
  if(!util.checkEmpty(__str_tmp)&&!util.isInteger(__str_tmp)){
  SetErrorTips(tips_orders,'排序必须是整数!');
  __isAllow=false;
  }
  }
  var validateParameter_enabled=function(){
  var __str_tmp = $("#txt_enabled").val();
  SetSuccessTips(tips_enabled,' ');
  if(!util.checkEmpty(__str_tmp)&&!util.isBoolean(__str_tmp)){
  SetErrorTips(tips_enabled,'启用必须是布尔值!');
  __isAllow=false;
  }
  }
  //--一次性验证
   
  __isAllow=true;
   
  validateParameter_name();
  if(SingleOrMuti=="single"){
  validateParameter_color();
  }
  validateParameter_orders();
  validateParameter_enabled();
  if(__isAllow==false){
  layer.alert("表单填写失误。。");
  return false;
  }
   
  //--保存相关资料
  if(SingleOrMuti=="single"){
   
  AttrData.options[index].name=$("#_txt_name").val();
  AttrData.options[index].color=$("#_txt_color").val();
  AttrData.options[index].orders=isNaN(parseInt($("#_txt_orders").val()))?0:parseInt($("#_txt_orders").val());
  AttrData.options[index].enabled=$("#_cbox_enabled").attr("checked")?true:false;
  singleoption_genTpl();
  dialog1.close();
  }
  else{
  AttrData.options[index].name=$("#_txt_name").val();
  AttrData.options[index].color='';
  AttrData.options[index].orders=isNaN(parseInt($("#_txt_orders").val()))?0:parseInt($("#_txt_orders").val());
  AttrData.options[index].enabled=$("#_cbox_enabled").attr("checked")?true:false;
  mutioption_genTpl();
  dialog1.close();
   
  }
   
  return false;
  },
  okVal:"保存修改",
  cancel:function(){},
  cancelVal:"取消"
  });
  }
  function _disableOption(index,SingleOrMuti){
  var _item=[];
  if(SingleOrMuti=="single"){
  AttrData.options[index]["enabled"]=false;
  singleoption_genTpl();
  }
  else{
  AttrData.options[index]["enabled"]=false;
  mutioption_genTpl();
  }
   
  }
  </script>
  </body>
  </html>
   
   
   
   
   
   
 

模型属性列表的数据格式,以手机的部分属性为例:
[{"id":0,"moduleid":0,"name":"颜色","attrName":"color","tips":"机身颜色","chooseType":1,"attrType":1,"isRequired":true,"usedInSearch":true,"enabled":true,"isMain":false,"orders":0,"single_isColor":true,"single_imgAllowed":true,"muti_maxSelected":0,"input_uiType":0,"options":[{"id":0,"name":"白色","color":"#000000","orders":0,"enabled":true},{"id":0,"name":"黑色","color":"#ffffff","orders":1,"enabled":true}]},{"id":0,"moduleid":0,"name":"版本","attrName":"version","tips":"","chooseType":3,"attrType":1,"isRequired":true,"usedInSearch":false,"enabled":true,"isMain":false,"orders":0,"single_isColor":false,"single_imgAllowed":false,"muti_maxSelected":0,"input_uiType":1,"options":[]},{"id":0,"moduleid":0,"name":"网络制式","attrName":"web","tips":"","chooseType":2,"attrType":2,"isRequired":true,"usedInSearch":false,"enabled":true,"isMain":false,"orders":0,"single_isColor":false,"single_imgAllowed":false,"muti_maxSelected":4,"input_uiType":0,"options":[{"id":0,"name":"GSM/WCDMA/LTE","color":"","orders":0,"enabled":true},{"id":0,"name":"WCDMA/CDMA2000/TD-SCDMA","color":"","orders":0,"enabled":true},{"id":0,"name":"GSM/WCDMA/CDMA/CDMA2000","color":"","orders":1,"enabled":true},{"id":0,"name":"双模(GSM/CDMA)","color":"","orders":3,"enabled":true}]},{"id":0,"moduleid":0,"name":"机身内存","attrName":"neicun","tips":"","chooseType":1,"attrType":1,"isRequired":true,"usedInSearch":false,"enabled":true,"isMain":false,"orders":3,"single_isColor":false,"single_imgAllowed":false,"muti_maxSelected":0,"input_uiType":0,"options":[{"id":0,"name":"256MB","color":"","orders":0,"enabled":true},{"id":0,"name":"512MB","color":"","orders":2,"enabled":true},{"id":0,"name":"1G","color":"","orders":3,"enabled":true},{"id":0,"name":"4g","color":"","orders":8,"enabled":true},{"id":0,"name":"2g","color":"","orders":8,"enabled":true},{"id":0,"name":"8g","color":"","orders":10,"enabled":true},{"id":0,"name":"16G","color":"","orders":12,"enabled":true},{"id":0,"name":"32G","color":"","orders":16,"enabled":true}]}] 

抱歉!评论已关闭.