商品的页面
商品的页面实际上也只有列表页，添加页，编辑页，查看页。在商品里面好好研究了一下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 = '
'"/>';
},
failure: function (response) {
Ext.MessageBox.alert("提示", "上传失败！");
}
})
}
} else {
Ext.Msg.alert("提示", "请输入正确的数据！")
}
}
}
}
],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">
class="col p w-xs control-label " style="vertical-align:middle">颜色：
div>4、表单提交，这段代码简省了一些，无论是Angular还是Ext项目，我都做了好多好多表单，哈哈，死磕表单。因为省略了很多内容，说不定div都对不上。只是贴出来希望自己能时不时看看。
表单的提交，需要关注的只是
<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">商品代码（规 格）：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>
<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>
<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()">Submitbutton>
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) }
);
}
};