商品的页面

商品的页面实际上也只有列表页，添加页，编辑页，查看页。在商品里面好好研究了一下jstree控件和ui-options=”validateOptions”表单提交控件。这也是我第一次模仿源码写插件。写出想要的效果之后我真的非常高兴，哈哈。
1、jstree

//树
 $scope.jstreeOption =
            {
            'plugins': [ "json_data", "ui", "tri-state", "types", "contextmenu","conditionalselect"],
                /*阻止用户选择根节点*/
                "conditionalselect": function (node) {
                    console.log(node.text);
                    return node.text === "喜欢的公司" ? false : true;
                },           
                'core': {
                    "multiple": false, // no multiselection
                    'check_callback': true,
                    "data": {
                        /**/
                        'url': app_settings.api_host_url + 'api/producttree/TreelistAll',
                        "dataType": "json",
                        'data': function (node) {
                            return { 'id': node.id };
                        },
                        /*注意: 必须添加这个参数 */
                        "headers": { authorization: app_settings.authPrefix + $localStorage.jwt }
                    },
                    'strings': {
                        'Loading ...': '正在载入，请稍等······'
                    }
                },
                "types": {
                    "default": {
                        "icon": "fa fa-file "
                    },
                },
                "contextmenu": SystemParam.contextmenu(function (tmp) {
                    /* Add Invoke */
                    //添加节点后在此发送请求


                }, function (tmp) {
                    /* Edit Invoke */
                   //编辑节点后在此发送请求

                }, function (tmp) {
                    /* Del Invoke */
                   //删除节点后在此发送请求

                })
            };
        //树加载前判断哪个节点被选中
        //编辑页面需要将节点的选中状态表现出来
        $("#jstree").on("load_node.jstree", function (e, data) {
            $($(this).find('i')[1]).removeClass("fa fa-file");
            $($(this).find('i')[1]).addClass("fa fa-folder fa-lg");
            $("#jstree").find("li").each(function (e, data) {
                if ($(this).find('a')[0].innerText == $scope.detailModel.ptName) {
                   $($(this).find('a')[0]).css("background", "#BEEBFF");
                }

            })

        })
        //节点数组
        //select_node.jstree deselect_node.jstree是通过阅读源码找到的方法。扩张功能就需要阅读源码。编程是最能效率体现学以致用这个词的行业啊。
        var treeSelectedArray = new Array()
        $('#jstree').on('select_node.jstree', function (e, data) {                              
            $scope.detailModel.pTypeID = parseInt(data.node.id);
            console.log($scope.detailModel.pTypeID);
            console.log(typeof ($scope.detailModel.pTypeID));

            $("#jstree").find("li").each(function (e, data) {
                console. log($("#jstree").find("li"));
                if ($(this).find('a')[0].innerText == $scope.detailModel.ptName) {
                    $(this).find('a').css("background", "");
                }

            })
        });
         $('#jstree').on('deselect_node.jstree', function (e, data) {
            console.log('deselect_node');
            treeSelectedArray.remove(data.node.id);
            console.log(treeSelectedArray)
            console.log(treeSelectedArray.join(','));
        });

接下来的Ext项目中，我也得到机会好好研究了一下树。已经整理过一次了。Ext的树我没有做到编辑页面展现节点被选中的效果（样式上），我只绑了值（显示）。有点可惜。因为树是继承，后台没有传checked属性，自己在端上加上checked属性之后，会产生一些麻烦。最后并没有找到更合适的解决办法。
说到通过表单传送节点和图片。Angular和Ext二者间的做法也多有不同。
Ext提交表单用的是

 buttons: [
       {
           text: '保存',
           listeners:{
               'click': function () {
                   var form = Ext.getCmp('adduser').getForm();
                   var head = window.localStorage.header;
                   if (form.isValid()) {
                       if (usernode == 0) {
                           console.log("------------")
                           console.log(usernode)
                           Ext.Msg.alert("提示", '不能添加企业为部门！')
                       } else {
                                form.submit({
                                    //waitTitle: "请稍候",
                                    //waitMsg: '正在上传...',
                                    //headers: {authorization: 'Bearer ' + head + ''},
                                    url: "" + domainname + "api/emp/AddEmployeeAndAccount",
                                    method: "POST",
                                    success: function (form, action) {
                                        console.log(form)
                                        console.log("-------JSON----------")
                                        console.log(action.response.responseText)
                                        //var text = response.responseText;
                                        //console.log(text)
                                        var datas = Ext.util.JSON.decode(action.response.responseText)
                                        console.log(datas)
                                        if (datas.info.StateCode == '0') {
                                            Ext.MessageBox.alert("提示", "提交成功!");
                                            var stroe = Ext.ComponentQuery.query('#usergrids')[0].getStore('usergrid');                                                      
                                            stroe.load();
                                            Ext.getCmp('winadd').destroy()
                                        } else {
                                            Ext.MessageBox.alert("提示", "" + datas.info.Message + "!");
                                        }
                                        //document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';
                                    },
                                    failure: function (response) {
                                        Ext.MessageBox.alert("提示", "上传失败！");
                                    }
                                })
                       }                
                   } else {
                       Ext.Msg.alert("<font size=4>提示</font>", "<font color=red>请输入正确的数据！</font>")
                   }
               }
           }       
         }      
       ],

Ext中需要为树写一个隐藏的textfield。在点击树的节点的时候，将节点赋给他。form.submit的方法就是获取表单中的所有值。

  {
            xtype: 'textfield',
            hidden: true,
            name: 'suibian',
            id: 'eptreeId',
            name: 'epDepa'
        },

2、在jstree里面的源码写插件，写好后用 ‘plugins’: [ ]引用。

    //自定义插件
    //避免用户在查看页面勾选树,调用activate_node激发get_node
    $.jstree.defaults.conditionalactivate = function () { return true; };
    $.jstree.plugins.conditionalactivate = function (options, parent) {

        this.activate_node = function (obj, e) {
            if (this.settings.conditionalactivate.call(this, this.get_node(obj))) {
                parent.activate_node.call(this, obj, e);
            }
        };
    };
    //避免用户勾选根节点,调用select_node激发get_node
    $.jstree.defaults.conditionalselect = function () { return true; };
    $.jstree.plugins.conditionalselect = function (options, parent) {
        this.select_node = function (obj, e) {
            if (this.settings.conditionalselect.call(this, this.get_node(obj))) {
                parent.select_node.call(this, obj, e);
            }
        };
    };

3、想起商品页绑值有个坑
在商品页面下拉框绑值的时候，遇到了一个问题，绑上去的值顺序不对。比如应该出现请选择，却显示的红色，请选择反而在下面。unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

 //颜色
        $scope.color = "0";       
        var colors = SystemParam.dict().ProductColor;
        $scope.Colors = colors;
        colors.unshift({ DicValue: '0', DicKey: "请选择" });

<div class="hbox m-t m-l" id="color">
  <span class="col  p w-xs control-label " style="vertical-align:middle">颜色：</span>
   <select id="colorselect" class="col form-control  m-t  conter" name="color" style="height:34px;" ng-model="color" ng-options="co.DicValue as co.DicKey for co in  Colors"></select>
</div>

4、表单提交，这段代码简省了一些，无论是Angular还是Ext项目，我都做了好多好多表单，哈哈，死磕表单。因为省略了很多内容，说不定div都对不上。只是贴出来希望自己能时不时看看。
表单的提交，需要关注的只是

<form id="form1" class="col form-validation col-lg-5" name="novalidateForm" novalidate ui-jq="validate" ui-options="validateOptions" >
</form>

<form id="form1" class=" col form-validation col-lg-5" name="novalidateForm" novalidate ui-jq="validate" ui-options="validateOptions" >
   <div class="col  bg-light lter">
     <div class="m-l">
       <div class="line line-dashed b-b line-lg pull-in  m-l-xxl"></div>
       <div class="hbox  m-t  m-l" id="standard">
        <label class="col w-xs " name="" for="" style="vertical-align:middle">商品代码（规&nbsp;格）：</label>
        <input type="text" name="size" class="form-control col ticket" id="" placeholder="" ng-model="ProductEntity.pSize" style="height:34px;" value="{{}}">
   </div>

      <div class="hbox m-t m-l" >
        <label class="col w-xs " for="">商品类别：</label>
        <div class="bg-light col" style="background-color:#FFFFFF;border:1px solid #CFDADD;overflow-y:scroll;">
        <div name="treeId" ui-jq="jstree" id="jstree" ui-options="jstreeOption" style="height:200px;"></div>
       </div>
   </div>
<div class="hbox m-t m-l" id="unit">
      <span class="col p w-xs control-label " style="vertical-align:middle">单位：</span>
       <select id="unitselect" name="unit" class="col  form-control m-t  conter" ng-model="unitname_name" ng-options="un.DicValue as un.DicKey for un in unitname "  style="height:34px;"></select>
</div>
  <div class="hbox m-t   m-l" id="ckg">
     <label class="col w-xs " for="" style="vertical-align:middle;">长：</label>
      <input type="text" name="C" class="form-control  " ng-model="pLocalWHL.Long" style="height:34px;" placeholder="单位（cm）">
      <label class="col w-xs " for="" style="vertical-align:middle;text-align:center;">宽：</label>
      <input type="text" name="K" class="form-control " value="" ng-model="pLocalWHL.Width" style="height:34px;" placeholder="单位（cm）">
      <label class="col w-xs " for="" style="vertical-align:middle;text-align:center;">高：</label>
      <input type="text" name="G" class="form-control  " value="" ng-model="pLocalWHL.Height" style="height:34px;" placeholder="单位（cm）">
 </div>

 <!--绑定方式0-->
      <div class="hbox m-t m-l" id="brand">
          <span class="col   p w-xs control-label " style="vertical-align:middle">商品品牌：</span>
          <select id="brandselect" class="col form-control m-t conter" name="brand" style="height:34px;" ng-model="brand"ng-options="br.DicValue as br.DicName for br in  Brands"></select>
     </div>
<!--绑定方式1-->
       <!--<select id="brandselect" class="col form-control m-t conter" name="brand" style="height:34px;"   ng-model="unit">
      <option ng-repeat="un in Units" value="{{un.DicValue}}}">
                {{un.DicKey}}
       </option>
       </select>-->
<div class="input-group form-control no-padder" style="border:0px;">
<input type="text" name="weight" ng-maxlength="10" ng-minlength="4" ng-model="ProductEntity.pWeight" id="exchangeamount" size="5" style="ime-mode:disabled" onkeyup="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" class="form-control" placeholder="只能输入4-10个数字">
            </div>
       </div>
     </div>
   </div>
</div>
 <button class="m-t m-b btn btn-success col-lg-2" style="margin-left:300px;" ng-click="submit()">Submit</button>
 </form>

对应的控制器代码

        $scope.validateOptions = {
            errorElement: "em",
            //C、K、G是在html里面定义的name
            rules: {
                C: {
                    number: true
                },
                K: {
                    number: true
                },
                G: {
                    number: true
                },              
                productName: "required",
                SKUName: "required",
                barline: "required",
                warning: "required",
                size: "required",
                //下拉选择框的验证
                color: {
                    SelectZeroValida: true
                },
                unit: {
                    SelectZeroValida: true
                },
                brand: {
                    SelectZeroValida: true
                }            
            },
            //报错信息
            messages: {
                C: "请输入合法的数字",
                K: "请输入合法的数字",
                G: "请输入合法的数字",               
                productName: "请填写",
                SKUName: "请填写",
                barline: "请填写",
                warning: "请填写",
                size: "请填写"               
            },

            //validate the tree
            //手动验证树
            submitHandler: function (form) {
            //这个bug没有解决 = =，Angular项目就停止了
            //此处有问题？？？为什么点击提交不能立刻调用？而且只点击一次的时候不会调用，连续短时间内点击提交，才会调用？？
                console.log(444);
               if ($scope.ProductEntity.pTypeID == 1) {                   
                    console.log(111);
                    var inforData = { code: "", data: "请选择商品类别(,,• ₃ •,,)" };
                    console.log(222);
                    $scope.toaster(inforData, "warning");
                    console.log(333);
                    return;
               }
                console.log(555)
                if ($scope.ProductEntity.isPack == true) {
                    $scope.ProductEntity.isPack = 1;
                }
                else {
                    $scope.ProductEntity.isPack = 0;
                }
                $scope.ProductEntity.pWHL = $scope.pLocalWHL.Long + "*" + $scope.pLocalWHL.Width + "*" + $scope.pLocalWHL.Height                        
                $scope.ProductEntity.pColor = $("#colorselect").val();
                $scope.ProductEntity.pUnit = $("#unitselect").val();
                $scope.ProductEntity.pBrand = $("#brandselect").val();
                console.log(666)
                console.log($scope.ProductEntity);
                var RtnData = Post.post(app_settings.api_host_url + 'api/product/AddProduct', $scope.ProductEntity);
                console.log($scope.ProductEntity);
                console.log(777);

                RtnData.then(function (resultMessage) {
                    console.log("resultMessage.StateCode")
                    console.log(resultMessage.StateCode)
                    if (resultMessage.StateCode == "0") {
                        console.log("$scope.ProductEntity");
                        console.log($scope.ProductEntity);
                        var inforData = { code: "", data: "商品信息添加成功o(≧v≦)o~~" };
                        $scope.toaster(inforData, "success");
                        $state.go('app.commodity_info')
                    }
                }, function (err) {console.log(err) }
               );
            }
        };