angularjs

Posted 从未太晚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs相关的知识,希望对你有一定的参考价值。

angularjs可以解决开发人员不擅长html的问题,采用模块化配置,但是不支持样式的微调和修改

angularjs+MVC开发的协同办公平台,贴下图

编辑页面+附件

 

列表页

一个页面涉及另一个子表的详细页面

操作子表

 

 

列表页带搜索条件:

 

贴下项目管理的js配置代码,只需要配置相应的获取或操作数据的控制器就好了。

/**
 * 项目管理管理  ProjectManageController
 */
angular.module(\'EIPApp\').controller("ProjectManageCtrl", [\'$scope\', \'$localStorage\', \'COMMON_CONSTANT\',
     \'eipUrlAction\', \'eipHttpService\', \'eipDefaultDialog\', \'PostHelperFactory\', \'eipBrowsePageHelper\', \'eipDict\', function ($scope, $localStorage, COMMON_CONSTANT,
     eipUrlAction, eipHttpService, eipDefaultDialog, PostHelperFactory, eipBrowsePageHelper, eipDict) {
         $scope.t = true;
         $scope.outparamss = {
             API_VERSION: 1.2,
             init: {
                 initEditName: \'ProjectManage\',  //控制器 类名
                 initPrimaryKey: \'PROJ_ID\',   //数据库主键 大小写敏感
                 initUrl: {//初始化Url

                 },
                 initParam: {
                     browseInitParam: [//浏览页面初始化    LOG_TIME  LOG_CONTENT
                       //  { key: COMMON_CONSTANT.initBrowseItem, value: \'{ LOG_TIME: "",LOG_CONTENT:"" }\', toJsonObj: true, toCopy: true }
                     ],
                     editInitParam: [//编辑页面初始化
                       //  { key: \'item\', value: \'{"LOG_TIME":"","LOG_CONTENT":""}\', toJsonObj: true, isUseNewEdit: true }
                     ],
                     addInitParam: {

                     }

                 },
                 inUrlSumbit: {
                     editInitSubmit: [
                         {}
                     ]
                 }
             },
             dataModule: [
                 {
                     //查询数据块
                     key: COMMON_CONSTANT.BrowseKey,
                     module: {
                         eipGridTable: [


                 { name: \'项目ID\', field: \'PROJ_ID\', width: \'0\', visible: false, gridVisible: false, isDelKey: true },

                              { name: \'项目名称\', field: \'PROJ_NAME\', width: \'20%\', isLink: true, linkState: "MainFrame.ProjectManage.Edit", linkParams: [\'PROJ_ID\'], linkTransportType: "STRING" }//LOG_TIME
                                    , { name: \'所属科室\', field: \'PROJ_BELONGTO\', width: \'15%\' }
                               , { name: \'负责人\', field: \'PROJ_LEADER\', width: \'15%\' }
                            , { name: \'项目描述\', field: \'PROJ_DESC\', width: \'20%\' }
                               , { name: \'项目开始时间\', field: \'PROJ_STARTTIME\', width: \'20%\' }
                                  , { name: \'是否重点项目\', field: \'ISIMPORTANT\', width: \'10%\' }
                               

                         ],
                         eipSimpleTable: [
                             { name: \'项目名称\', type: \'text\', placeholder: \'项目名称\', ngModel: \'PROJ_NAME\', groupOrder: 1 }
                         ],
                         eipAdvancedTable: [
                               { name: \'项目名称\', type: \'text\', placeholder: \'项目名称\', ngModel: \'PROJ_NAME\', groupOrder: 1 }
                         ],
                         isShowEdit: "true",    //查询结果右上角,是否显示编辑按钮
                         isShowNew: "true",    //查询结果右上角,是否显示添加按钮
                         isShowDelete: "true", //查询结果右上角,是否显示删除按钮
                         isShowExport: "true"  //查询结果右上角,是否显示编辑按钮
                     }
                 },
                 {//编辑页面基本信息数据块
                     key: \'Edit_ProjInput\',   //Panel Key
                     module: [

                        // USER_NAME  ORG_FULLNAME
                               { name: \'项目名称\', bindModel: \'item.PROJ_NAME\', type: \'text\', row: 0, textColSpan: 2, contentColSpan: 3 },//LOG_TIME

                                 , { name: \'项目描述\', bindModel: \'item.PROJ_DESC\', type: \'textarea\', row: 1, textColSpan: 2, contentColSpan: 6 }
                                 , { name: \'所属科室\', bindModel: \'item.PROJ_BELONGTO\', type: \'text\', row: 2, textColSpan: 2, contentColSpan: 3 }
                                , { name: \'项目开始时间\', bindModel: \'item.PROJ_STARTTIME\', type: \'date\', row: 2, textColSpan: 2, contentColSpan: 3 }
                                , { name: \'项目验收时间\', bindModel: \'item.FINISH_TIME\', type: \'date\', row: 3, textColSpan: 2, contentColSpan: 3 }
                                , { name: \'项目上线时间\', bindModel: \'item.ONLINE_TIME\', type: \'date\', row: 3, textColSpan: 2, contentColSpan: 3 }
                                , { name: \'负责人\', bindModel: \'item.PROJ_LEADER\', type: \'text\', row: 4, textColSpan: 2, contentColSpan: 3 }
                                , { name: \'项目类型\', bindModel: \'item.PROJ_TYPE\', type: \'select\', bindDict_code: \'DICT_DEMO_PROBLEM_STATUS\',row: 4, textColSpan: 2, contentColSpan: 3 }
                                , { name: \'项目链接地址\', bindModel: \'item.PROJ_URL\', type: \'text\', row: 5, textColSpan: 2, contentColSpan: 5 }
                              //   , { name: \'项目验收报告\', bindModel: \'item.DOCUMENT\', type: \'text\', row: 6, textColSpan: 2, contentColSpan: 3 }
                              //   , { name: \'项目合同\', bindModel: \'item.PROJCONTRACT\', type: \'text\', row: 7, textColSpan: 2, contentColSpan: 3 }
                                 , { name: \'金额\', bindModel: \'item.PROJ_AMOUNT\', type: \'text\', row: 8, textColSpan: 2, contentColSpan: 3 }
                                 , { name: \'是否重点项目\', bindModel: \'item.ISIMPORTANT\', type: \'select\', bindDict_code: \'DICT_DEMO_PROBLEM_STATUS\', row: 8, textColSpan: 2, contentColSpan: 3 }

                     ],
                     //totalRows: 4
                 },
                 {//编辑页面用户分配列表数据块
                        key: \'Edit_ProjUser\',
                        module:
                            {
                                eipGridTable: [
                                    { name: \'关联表ID\', field: \'RU_ID\', width: \'10%\', gridVisible: false, isDelKey: true, visible: false },
                                    { name: \'用户ID\', field: \'USER_ID\', width: \'10%\', gridVisible: false, visible: false },
                                    { name: \'用户名称\', field: \'USER_NAME\', width: \'30%\', isDelArray: true, delShowName: true },
                                    { name: \'单位名称\', field: \'ORG_SHORTNAME\', width: \'30%\' }
                                ],
                                isShowEdit: "false",
                                isShowNew: "true",
                                isShowDelete: "true",
                                isShowExport: "false"
                            }
                  },
                 {//编辑页面用户弹出框
                     key: \'Edit_ProjUserModule\',
                     module:
                         [
                          {
                              name: \'\',
                              type: \'grid\',
                              columns: [
                                   { name: \'用户ID\', field: \'USER_ID\', visible: false, gridVisible: false, isDelKey: true, gridKey: true },
                                   { name: \'用户名称\', field: \'USER_NAME\', width: \'30%\', isDelArray: true, delShowName: true },
                                   { name: \'单位名称\', field: \'ORG_SHORTNAME\', width: \'30%\' }
                              ],
                              eipSimpleTable: [
                                 { name: \'用户名称\', type: \'text\', placeholder: \'请输入用户名称\', ngModel: \'USER_NAME\', groupOrder: 1 }
                              ],
                              row: 2, textColSpan: 0, contentColSpan: 10, enablePaginationControls: true
                          }]
                 }

             ],
             pageModule: [  //编辑页面自定义数据块 配置信息
                                 //type 是布局类型,共分为三种 [Edit_Regular :传统一行两列] [Edit_Irregular : 不规则布局] [Edit_Custom : 自定义控件宽高]
                                 //moduleTitle 是分区Panel的标题
                                 //dataModuleName 是Panel Key
                      {
                          type: \'Edit_Custom\', moduleTitle: \'项目管理\', dataModuleName: \'Edit_ProjInput\',
                      },
                      {//initActionName:子表分页   editActionName:获取子表单条数据   editSaveActionName:子表保存(新建、编辑) delActionName:删除
                          type: \'Edit_SubTable\', moduleTitle: \'项目成员\', dataModuleName: \'Edit_ProjUser\', isHide: "Edit_ProjUser_hide", permissionActionName: \'GetPermission\', initActionName: \'GetProjUserList\', modeModuleName: \'Edit_ProjUserModule\', modeTitle: \'添加项目成员\', addActionName: \'GetUserListOutOfProj\', editActionName: \'\', editSaveActionName: \'SaveProjUser\', delActionName: \'DeleteProjUser\', gridDataName: \'item.RoleUserList\'
                      }
                      

             ]
         }
     }]);

 

以上是关于angularjs的主要内容,如果未能解决你的问题,请参考以下文章

初入AngularJS基础门

AngularJS ——ngResourceRESTful APIs 使用

浅谈AngularJS中的$parse和$eval

AngularJS

AngularJS入门学习笔记一

AngularJS的学习笔记