gcxt中常见的问题
9374 2023/3/28 gcxt
# 元素样式
<!-- 实心按钮 -->
<a class="btn btn-deep-blue" id="update01">实心按钮</a>
<!-- 空心按钮 -->
<a class="btn btn-border-blue" id="showAllList">空心按钮</a>
<!-- 有图标的按钮 -->
<a class="btn btn-deep-blue iconfont iconpublic_plus" id="add">新增</a>
<a class="btn btn-deep-blue iconfont iconpublic_edit" id="update">编辑</a>
<a class="btn btn-deep-blue iconfont iconpublic_delete" id="delete">删除</a>
<a class="btn btn-deep-blue iconfont iconpublic_reload" id="release">发布</a>
<a class="btn btn-deep-blue iconfont iconwj-wj-2" id="generateTestPaper"
>生成试卷</a
>
<!-- 按钮中间的分割竖线 -->
<span class=" btn-separate" id="toolbar_separate"></span>
<!-- 帮助中心/操作提示 -->
<span id="help"
><img src="/scpms-progress/static/image/meeting/help.png"
/></span>
<!-- 更多按钮 -->
<div
class="btn-group dropdown header_menu open"
id="dropdown"
style="display:inline-block"
>
<button
type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
>
更多
<span class="arrow"></span>
</button>
<ul class="dropdown-menu">
<li><span class="out"></span></li>
<li id="downloadTemplate"><a href="javascript:void(0)">模板下载</a></li>
<li id="uploadTemplate"><a href="javascript:void(0)">导入</a></li>
<li id="export"><a href="javascript:void(0)">导出</a></li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# 布局
列表页布局
# 列表布局
# 左树右表
<div id="box">
<div class="box-wrapper">
<div class="list-wrapper noSearch-wrapper">
<!-- 左树 -->
<div class="list-tree">
<!-- <div id="serchProject" class='serch_content form-group' >
<label class="col-xs-3 control-label">项目名称：</label>
<div class="col-xs-8 typeheadinput">
<input type="hidden" id="projectCode" name="projectCode">
<input class="form-control clearable" name="projectName" id="projectName" maxlength="32">
</div>
</div> -->
<div class="ztree_content" style="border:none;">
<table id="grid-table-project" class="table"></table>
</div>
</div>
<!-- 右表-->
<div class="list-table" style="height:100%;">
<!-- 表格头部按钮 输入框等 -->
<!-- <div class="panel mar-no">
<div class="panel-body pad-all-sm bg-gray-light">
<a class="btn btn-deep-blue iconfont iconpublic_plus" id="addEvent">签到</a>
<span class="text-danger">(请输入培训期数查询列表)</span>
<span id="help"><img src="/scpms-security/static/image/meeting/help.png"></span>
<form id="search_form" style="width: 55%;display: inline-block;margin-left: 20px;">
<div class="form-group" style="margin: 0">
<label class="col-xs-1 control-label" style="width: 100px">签到日期：</label>
<div class="col-xs-6 has-feedback" >
<input type="text" class="form-control" id="daterangepicker" name="time">
</div>
<a class="btn btn-border-blue" id="search">查询</a>
<span class=" btn-separate" id="toolbar_separate"></span>
<a class="btn btn-border-blue" id="reset">重置</a>
</div>
</form>
</div>
</div> -->
<div class="panel mar-no pad-hor-sm bord-no text-center">
<table id="grid-table" class="table"></table>
<div id="grid-pager"></div>
</div>
</div>
<!-- 操作提示部分 -->
<!-- <div class="tiplayer_operation">
<div class="pic" >
<img src="/scpms-security/static/image/meeting/bg.png">
<div id="pic_check_tip_container">
</div>
</div>
<div class="tipclose">
<img src="/scpms-security/static/image/meeting/close.png">
</div>
</div> -->
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# 全屏表格带操作按钮
<div id="box">
<div class="box-wrapper">
<div class="panel mar-no">
<div class="panel-body pad-all-sm bg-gray-light">
<a class="btn btn-deep-blue iconfont iconpublic_plus" id="add">新增</a>
<a class="btn btn-deep-blue iconfont iconpublic_edit" id="update"
>编辑</a
>
<a class="btn btn-deep-blue iconfont iconpublic_delete" id="delete"
>删除</a
>
<a class="btn btn-deep-blue iconfont iconwj-wj-2" id="viewEvent1"
>生成考生试卷</a
>
<a class="btn btn-deep-blue iconfont iconwj-wj-2" id="viewEvent2"
>生成老师试卷</a
>
<span id="help"
><img src="/scpms-security/static/image/meeting/help.png"
/></span>
</div>
</div>
<div class="panel mar-no pad-hor-sm text-center">
<table id="grid-table" class="table"></table>
<div id="grid-pager"></div>
</div>
</div>
<!-- 帮助信息 -->
<!-- <div class="tiplayer_operation">
<div class="pic" >
<img src="/scpms-security/static/image/meeting/bg.png">
<div id="pic_check_tip_container">
</div>
</div>
<div class="tipclose">
<img src="/scpms-security/static/image/meeting/close.png">
</div>
</div> -->
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 全屏表格无按钮
<div id="box">
<div class="box-wrapper">
<div class="panel pad-hor-sm mar-no text-center pad-top-sm">
<table id="grid-table" class="table"></table>
<div id="grid-pager"></div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
查看编辑页布局
# 详情页布局
# 基本信息
<div id="box">
<div class="box-wrapper">
<!-- 按钮功能部分 -->
<div class="panel mar-no pad-all-sm bord-ver">
<a
class="btn btn-border-blue"
id="back"
href="/scpms-security/hseMachineReportBack/toList"
>返回</a
>
<span class=" btn-separate" id="toolbar_separate"></span>
<a class="btn btn-deep-blue save" id="save">保存</a>
<a class="btn btn-deep-blue submit" id="submit">提交</a>
<span id="help"
><img src="/scpms-security/static/image/meeting/help.png"
/></span>
</div>
<!-- 详细信息部分 -->
<div class="scroll-wrapper">
<form id="headForm">
<!--基本信息分块 -->
<div class="panel bord-no mar-btm-sm">
<div class="panel-heading">
<div class="panel-title">基本信息</div>
<span
class="content-toggle iconfont iconpublic_doubleleft-down"
></span>
</div>
<div class="panel-body pad-all" style="padding-left: 30px;">
<!-- 每一行内容 -->
<div class="form-horizontal">
<div class="form-group mar-btm-sm">
<input type="hidden" id="id" name="id" />
<label class="col-xs-1 control-label"
><span class="text-danger">*</span> 项目名称：</label
>
<div class="col-xs-3">
<input
class="form-control clearable"
name="projectName"
id="projectName"
required
/>
</div>
<label class="col-xs-2 control-label">项目编码：</label>
<div class="col-xs-3">
<input
class="form-control clearable"
name="projectCode"
id="projectCode"
placeholder="选择项目后带出"
readonly
/>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# 按钮固定 页面滚动
<div id="box" style="max-height: 100%;">
<div class="box-wrapper">
<!-- 按钮部分 -->
<div class="panel mar-no bord-ver pad-all-sm"></div>
<!-- 页面部分 -->
<div class="scroll-wrapper">
<form id="headForm">
<!-- 头部 -->
<div class="panel-heading">
<div class="panel-title">检查通报信息</div>
<span
class="content-toggle iconfont iconpublic_doubleleft-down"
></span>
</div>
<!-- 信息 -->
<div class="panel-body pad-all" style="padding-left: 30px;">
<div class="form-horizontal">
<!-- 行内容 -->
<div class="form-group mar-btm-sm"></div>
</div>
</div>
</form>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 表单
# 触发校验
var validForm = $('#headForm').data('bootstrapValidator')
validForm.validate()
// 判断验证结果
if (!validForm.isValid()) {
return false
}
1
2
3
4
5
6
2
3
4
5
6
# 重置校验
//重置验证
// 修改form表单中元素的 required readonly 后可以通过重置 更新校验状态
// 取消校验
$('#headForm').data('bootstrapValidator').destroy()
//重新添加
initFormFunction.initFormValidate('#headForm')
1
2
3
4
5
6
2
3
4
5
6
# input 转为日期框
// <input class="form-control datetps" name="examineDate" id="examineDate" daterotime="d" value="${currentTime}" required>
/**
* 传入 datetps 需要改为日期选择框的input 类名或id
* 选择后的回调函数回调函数
* type 根据不同的type 弹出不同的时间选择框；
*/
initDatePicker.dateTimePicker('.datetps', null, 1)
// daterotime="d"
// 根据daterotime 熟悉 setformdata时回 格式化为不同的时间类型
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# input 转为下拉框
{
/* <select class="form-control selectpicker" name="exteriorCheckResult" id="exteriorCheckResult" required></select> */
}
//根据字典 转为下拉框
$('#exteriorCheckResult').fillFormSelect('FMGL_SFHG')
/**
*
* 公共数据下拉框
* @param type 数据字段
* @param defaultValue 默认显示的第一条记录，['',''] or ''
* @param selectValue 默认选中记录，''
* @param fuzzyValue 根据name选择，模糊查询
* @returns {boolean}
*/
$('#surveyProblemAndOpinion').fillFormSelect('FMGL_PROBLE', ['', '请选择'])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# input 下拉框刷新
$('#zizaType').selectpicker('refresh').trigger('change');
1
# input 转 Typeheader 模糊搜索选择框
/**
* typeahead插件的二次扩展方法
* @param element 需要绑定的元素
* @param code1 (attCode 后台需要的参数)
* @param code2 (condition 后台需要的参数)
* @param code3 (文本框填写内容不存在的提示信息)
* @param code4 (需要清空的元素，比如"#aaa","#bbb")
* @param callback 回调函数 (返回的是你所选择的option对象，这个对象是后台返回的list中的对象)
* @param selectFlag 是否默认选中第一条
* @param colName 以数组形式传 ['aaaa',bbbbbb']
* @param projectFilter 是否进行按照个人项目配置过滤
*/
inputTypeahead(
'#projectName',
'DICT_PROJECT',
"and node_type='01'",
'项目不存在',
'#projectName,#projectCode',
function (item) {
// 这里写回调函数 选中后的操作
// 与下一级typehead联动；
// dataObj.initWbsTypeahead(item.project_code)
}
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 数据回填
/**
* form数据回填
* attr attr=true时输入字段上增加class nodeEditTable 该输入框可以编辑
* @param1 需要回填数据的form
* @param2 数据来源 接收一个对象
* @param3 回填后是否可以编辑 接收一个Boolean true 不可编辑
*/
initFormFunction.load('#headForm', response.data)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 批量更改是否可输入
// 不可输入 ==> 可输入 @param string 这个参数是字符串的元素的id或class(如:"#aaa,#bbbb")
elementEditable('#costUnitName,#costUserName')
// 可输入 ==>不可输入 @param string 这个参数是字符串的元素的id或class(如:"#aaa,#bbbb")
elementReadOnly('#serialNo,#projectCode,#wbsCode')
1
2
3
4
2
3
4
# 表格/jqgrid
# 方法api
# 获取选中行
- 单选
- 多选
# 列配置
- 输入
- 开启输入
cellEdit: true,//整表开启编辑 editable:true // 单列开启编辑1
2自定义输入事件
输入完成后的校验
输入弹窗选择
输入选择日期
{label : '实际开始日期',name : 'currentStartAt',index : 'currentStartAt',width : 180,sortable : false,align : "right",formatter:jqGridFunction.formatterDateDay, editoptions:{required:true,dataEvents:[{type:'focus',fn:function(e){jqGridFunction.selectTimePicker(e)}}]},align:"left",editable:true, editrules: { required:true,custom: true, custom_func: model.currentStartAtDT }},1
2
3- 点击弹出树选择
- 页面添加树
<div class="layerTree" style="display:none"> <div class="list-tree"> <!-- <div class='serch_content'> <i class="iconfont iconpublic_search"></i> <input type='text' placeholder='请输入编码或名称' id='serach_tree' class='search_tree clearable'/> </div> --> <div class="ztree_content"> <ul id="ztree_basic_layerTree" class="ztree" style="height: 300px; overflow-y: auto;"></ul> </div> </div> </div> <script src="/common/plugins/ztree/js/jquery.ztree.core.min.js"></script> <script src="/common/plugins/ztree/js/jquery.ztree.excheck.min.js"></script>1
2
3
4
5
6
7
8
9
10
11
12
13- 创建树
creatLayerZtree : function() { var self = this; // var busiTypeCode = 'hse_check_yz_'+projectCode; var setting = { async : { enable : true, //url : '/scpms-change/estimateAdmin/selectItemById', url :path + '/area/tree', // autoParam : [ "cbsCode", "cbsName", "parentCbsCode", "nodeLevel" ], dataType : "json", // contentType:'application/json', // dataType :"text", // data:{admin:projectCode}, dataFilter : function(treeId, parentNode, responseData) { console.log(responseData) // self.treeData = responseData.data; // responseData.data= responseData.data? responseData.data:[] // responseData.data.forEach(function (item){ // item.isParent=item.isParent==0?false:true; // item.checked=false; // item.isLeaf=item.isLeaf=='false'?false:true; // item.parentCbsCode=item.parentCbsCode==0?'':item.parentCbsCode // }) // console.log(responseData.data) return responseData.data; } }, view : { showLine: false, showIcon: false, selectedMulti: false, addDiyDom: function(treeId, treeNode) { var spaceWidth = 5; var switchObj = $("#" + treeNode.tId + "_switch"); var checkObj = $("#" + treeNode.tId + "_check"); var icoObj = $("#" + treeNode.tId + "_ico"); switchObj.remove(); icoObj.before(switchObj); icoObj.before(checkObj) if (treeNode.level > 1) { var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>"; switchObj.before(spaceStr); } } }, data : { simpleData : { enable : true, // idKey:'cbsCode', // pIdKey:'parentCbsCode', // rootPid:'0', }, key:{ title: "code", children: "child", // isParent:'isParent', // checked:'checked', // name:'cbsName' } }, check : { enable: false, chkStyle: "radio" }, callback : { onClick : self.treenodeClick, onAsyncSuccess : function(){ var treeObj = $.fn.zTree.getZTreeObj("ztree_basic_layerTree"); var nodes = treeObj.getNodes(); for (var i = 0; i < nodes.length; i++) { // 设置节点展开 treeObj.expandNode(nodes[i], true, false, true); } } } }; $.fn.zTree.init($("#ztree_basic_layerTree"), setting); self.treeObj=$.fn.zTree.getZTreeObj("ztree_basic_layerTree"); },1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80- 弹出树
//弹出Tree openLayerTree:function(){ layer.open({ type:1, fix: true, title: "选择省市区信息", scrollbar: true, // shift: 1, maxmin: false, content: $('.layerTree'), area: ['400px', '400px'], btn: ['取消', '保存'], success: function() { }, btn2: function(index, layer) { var treeObCbs = $.fn.zTree.getZTreeObj("ztree_basic_layerTree"); var selectedNodes = treeObCbs.getCheckedNodes(true); var nodes = treeObCbs.getSelectedNodes() console.log(nodes) if(nodes&&nodes.length){ var obj = nodes[0] var paths= obj.getPath() paths.shift() console.log(paths) if(paths&&paths.length){ var name = [] var code = [] paths.forEach(function (item){ name.push(item.name) code.push(item.code) }) $('#priceInformation-table-child').jqGrid('setCell',model.selctId ,'city',name.join('/')) $('#priceInformation-table-child').jqGrid('setCell',model.selctId ,'cityCode',code.join('/')) } // // cbsCode // $('#grid-table').jqGrid('setCell',model.selctId ,'cbsNameAndCode',obj.cbsName+'/'+obj.cbsCode) // $('#grid-table').jqGrid('setCell',model.selctId ,'cbsName',obj.cbsName) // $('#grid-table').jqGrid('setCell',model.selctId ,'cbsCode',obj.cbsCode) } } }); },1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44- 绑定弹出事件
editoptions:{dataEvents:[{type:'focus',fn:function(e){self.openLayerTree(e)}}]}1- 宽度自适应
// 自适应宽度 shrinkToFit: false,1
2 - 显示
- 当前行根据字典值格式化显示内容
formatter_attCode: 'CAR_TYPE', formatter: formatterJqgridColumn,1
2- 根据字典值格式化的内容获取行时返回默认内容
unformat: unformatterJqgridColumn,1 - 选择
- 开启单选
- 开启多选
multiselect: true,1
# 列头配置
配置
- 关闭列头工具栏（隐藏搜索与排序）
filterToolbar: false,1- 关闭搜索
search:false,1- 关闭排序
sortable:false,1搜索
- 列头根据字典下拉搜索
stype: 'select', searchoptions: fillJqgridSelect("CAR_TYPE", "全部")1
2- 列头时间搜索
- 搜索类型配置
earchoptions:{sopt:["int_eq"]}1类型 编码 作用 saf eq equal
# 示例
- 整表配置
jqGridFunction.init('#grid-table', '#grid-pager', {
url: path + '/informationChange/selectByPage',
datatype: 'json',
searchForm: '#search_form',
// 显示搜索栏
filterToolbar: true,
//开启多选
multiselect: false,
// 自适应宽度
shrinkToFit: false,
// 请求时携带的post参数
postData: {},
// 双击回调
ondblClickRow: function (id) {},
// 加载完成回调
gridComplete: function () {},
loadComplete: function () {},
onSelectRow: function () {},
treedatatype: _default.treedatatype,
datastr: url,
colModel: [],
// treeGrid: _default.treeGrid,
// treeGridModel: _default.treeGridModel,
// ExpandColumn: _default.ExpandColumn,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
- 单列配置
colModel = [
{
label: '车辆类型',
name: 'carType',
index: 'carType',
width: 100,
align: 'left',
stype: 'select',
searchoptions: fillJqgridSelect('CAR_TYPE', '全部'),
formatter_attCode: 'CAR_TYPE',
formatter: formatterJqgridColumn,
unformat: unformatterJqgridColumn,
},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# treeGrid
# 搜索
//事件委托父级监听
$("#table-content").keydown(function(e){
// 搜索的列id
if(e.target.id=='gs_jobCode'){
setTimeout(function(){
console.log($(e.target).val())
// 获取实际输入的值 下面进行逻辑判断
console.log(model.quantityObj.dataList)
},10)
}
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11