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', '0', visible: false, gridVisible: false, isDelKey: true }, { name: '项目名称', field: 'PROJ_NAME', '20%', isLink: true, linkState: "MainFrame.ProjectManage.Edit", linkParams: ['PROJ_ID'], linkTransportType: "STRING" }//LOG_TIME , { name: '所属科室', field: 'PROJ_BELONGTO', '15%' } , { name: '负责人', field: 'PROJ_LEADER', '15%' } , { name: '项目描述', field: 'PROJ_DESC', '20%' } , { name: '项目开始时间', field: 'PROJ_STARTTIME', '20%' } , { name: '是否重点项目', field: 'ISIMPORTANT', '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', '10%', gridVisible: false, isDelKey: true, visible: false }, { name: '用户ID', field: 'USER_ID', '10%', gridVisible: false, visible: false }, { name: '用户名称', field: 'USER_NAME', '30%', isDelArray: true, delShowName: true }, { name: '单位名称', field: 'ORG_SHORTNAME', '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', '30%', isDelArray: true, delShowName: true }, { name: '单位名称', field: 'ORG_SHORTNAME', '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' } ] } }]);