zoukankan      html  css  js  c++  java
  • 新框架感想:路由、查询、添加和修改、复杂的添加和修改、submit按钮、弹出框确认、page

    路由

    1.在config.js文件中进行配置

    2.在nav.html中添加目录的路由

    查询

    1.所谓查询,就是将查询条件打包成searchPara发给后台,再从后台获取所需数据

    2.代码:

    $scope.前台方法名=function(){
      接口名.接口内的方法名(searchPara,page,function(data,success){
           if(!success){
                alert(“操作失败:”+data);
                return false;
            }
            searchList=data.list;
            $scope.page=data.page;
        })  
    }

    添加和修改

    1.先在主页的js中写一段代码,打开子页面

            $scope.前台方法名= function (前台打包的显示值item) {
                var modalInstance = $modal.open({
                    templateUrl: '子页面路径',
                    controller: '子页面controller',
                    keyboard: false,//防止ESC键关闭模态框
                    backdrop: 'static',//防止鼠标点击空白处关闭模态框
                    size: 'lg',//模态框尺寸
                    resolve: {
                        model: function () {
                            return 前台打包的显示值item;
                        }
                    }
                });
    
                modalInstance.result.then(function (backUser) {
                    关闭模态框以后调用的函数();
                }, function () {
                    $log.info('Modal dismissed at: ' + new Date());
                });
            };

    2.提交函数:

            $scope.前台方法名 = function () {
                $scope.submitName = "提交中...";
                $scope.stnDisable = true;
                接口名.接口内的方法名($scope.前台打包的提交值submitPara, function (data, success) {
                    $scope.submitName = "确定";
                    $scope.stnDisable = false;
                    if (!success) {
                        alert( "操作失败:" + data);
                        return false;
                    }
                    alert( "操作成功!");
                    $modalInstance.close($scope.model);
                });
            };

    3.子页面要显示传过来的model值,记得先引入model路由~~

            if (model.tid == 0) {
                $scope.operating = '新增';
            }
            else {
                $scope.operating = '编辑';
                $scope.前台打包的显示值model = model;
            }

    4.一般来说,item=model=submitPara

    5.但是也有复杂的情况,比如添加的时候提交的是数组[0][1][2][3][4][5],请看下一条~复杂的添加和修改

    复杂的添加和修改

    1.如图所示的页面,添加的时候不添加红框中的值,而是添加下方的数组[0][1][2][3][4][5]

    2.先将红框中的一条添加到明细吧~

             $scope.方法名= function () {
                $scope.数组名array[$scope.数组名array.length] = {
                    字段名1: $scope.红框打包值名.字段名1,
                    name: $scope.detail.name;
                };
                $scope.数组名array= {};
            }

    3.删除某条明细~~

            $scope.deleteItems = function (item) {
                $scope.数组名array.splice($scope.数组名array.indexOf(item), 1);
            }

    4.提交的时候是将数组名array提交

            $scope.方法名= function () {
                $scope.saveName = "保存中...";
                $scope.stnDisable = true;
                $scope.submitPara.后台要的array字段 = $scope.数组名array;
                接口名.接口方法名($scope.submitPara, function (data, success) {
                    $scope.submitName = "保存待发";
                    $scope.stnDisable = false;
                    if (!success) {
                        alert("操作失败:" + data);
                        return false;
                    }
                    alert("操作成功!");
                    $modalInstance.close(true);
                });
            };

    5.显示的时候不要用model将所有值从前台传过来,这样数据量太大,model的作用是传item.TID

            if (model == 0) {
                $scope.operating = '新增';
            }
            else {
                $scope.operating = '编辑';
                $scope.searchPara.后台要的业务TID= model;
                $scope.submitPara.后台要的业务TID= model;
                查询方法();
            }

    6.那么如何显示呢~答案是写一个查询明细的接口,这个查询接口返回的searchList中有页面需要显示的业务值和明细Array,如下图

    7.查询函数和上文中的查询函数大同小异,只是不要page,以及将数组名改成添加时页面上显示的数组名(不然页面不会显示明细的~)

            $scope.方法名=function() {
                接口名.接口内的方法名($scope.searchPara, function (data, success) {
                        if (!success) {
                            alert(data);
                            return false;
                        }
                        $scope.searchList = data;
                        $scope.array = data.后台的数组名;//因为查询得到的数组名要 = 添加时页面上显示的数组名
                    });
                }

     submit按钮

    1.子页面进行添加、提交等操作时~~

    2.子页面按钮:

    <button ng-click="submit()" ng-disabled='form.$invalid||stnDisable'>{{submitName||"提交"}}</button>

    3.后台先声明~~

    $scope.stnDisable = false;

    4.提交的时候~~

     弹出框确认

            $scope.SubmitPsContract = function (PsPnBitID) {
                if (!confirm("确认发起审批吗?")) {
                    return;
                }
                $scope.approvalPara.PsPnBitID = PsPnBitID
                PsContractManageService.SubmitPsContract($scope.approvalPara, function (data, success) {
                    if (!success) {
                        alert(data);
                        return false;
                    }
                    alert("操作成功!");
                    $scope.Search2();
                });
            };
  • 相关阅读:
    使用图形化技术完成电子相册程序的开发
    本周新学的 GUI绘图技术
    不如今日来说 有关StringBufferr类和字符串格式化的内容~
    PHP的身份证号码工具类
    在网页中嵌入带标识的百度地图
    PHP正则表达式使用详解
    Spicy Chicken GDI in C#
    [C++] Running time and Integer to String
    the difference between const int *, int * const, int const *
    [C# WPF]MoeEroViewer Developing Log
  • 原文地址:https://www.cnblogs.com/wangchufang/p/8628798.html
Copyright © 2011-2022 走看看