You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
11 KiB
130 lines
11 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
<script src="js/jquery-2.1.3.min.js"></script>
|
|
<link href="layui/css/layui.css" rel="stylesheet" />
|
|
<script src="layui/layui.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入职责名称" class="layui-input" style="width:160px;">
|
|
</div>
|
|
<button type="button" class="layui-btn layui-btn-normal">搜索</button>
|
|
<button type="button" class="layui-btn layui-btn-normal" id="btn_add">添加</button>
|
|
|
|
|
|
<table class="layui-hide" id="test"></table>
|
|
|
|
<div id="divEdit" style="display:none; width:400px;">
|
|
|
|
|
|
|
|
<form class="layui-form" action="">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">职责名称</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="iptName" name="title" lay-verify="title" autocomplete="off" placeholder="请输入职责名称" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-form-text">
|
|
<label class="layui-form-label">职责内容</label>
|
|
<div class="layui-input-block">
|
|
<textarea id="iptRemark" placeholder="请输入职责内容" class="layui-textarea"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">确定</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
layui.use('table', function () {
|
|
var table = layui.table;
|
|
var dataArr = [
|
|
{ "id": "10001", "zzName": "职责1", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10002", "zzName": "职责2", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10003", "zzName": "职责3", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10004", "zzName": "职责4", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10005", "zzName": "职责5", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10006", "zzName": "职责6", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10007", "zzName": "职责7", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10008", "zzName": "职责8", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10009", "zzName": "职责9", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10010", "zzName": "职责10", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10011", "zzName": "职责11", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10012", "zzName": "职责12", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10013", "zzName": "职责13", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10014", "zzName": "职责14", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10015", "zzName": "职责15", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10016", "zzName": "职责16", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10017", "zzName": "职责17", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10018", "zzName": "职责18", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10019", "zzName": "职责19", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10020", "zzName": "职责20", "zzRemark": "1、选拔和培养有能力的基层管理人员；2、思考部门的战略方向，关注部门短期目标的达成情况；3、有效协调自己部门和其它部门的跨部门合作相关工作。", "createTime": "2022-11-10 17:21:33" },
|
|
];
|
|
|
|
table.render({
|
|
elem: '#test'
|
|
, data: dataArr
|
|
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
|
, cols: [[
|
|
//{ field: 'id', align: "center", title: 'ID', sort: true }
|
|
{ field: 'zzName', align: "center", title: '职责名称' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
|
|
, { field: 'zzRemark', align: "center", title: '职责内容', sort: true }
|
|
, { field: 'createTime', align: "center", title: '创建时间' }
|
|
, {
|
|
field: 'cz', align: "center", title: '操作', templet: function (d) {
|
|
//console.log(d);
|
|
var htmlStr = '<i class="layui-icon layui-icon-edit clsAdd" indx="' + d.LAY_INDEX + '" style="font-size: 30px; color: #1E9FFF;"></i> ' +
|
|
' <i class="layui-icon layui-icon-delete clsDel" indx="' + d.LAY_INDEX + '" style="font-size: 30px; color: #1E9FFF;"></i> ';
|
|
return htmlStr;
|
|
}
|
|
}
|
|
]]
|
|
, page: true
|
|
, limits: [10, 15, 20, 25]
|
|
, limit: 15
|
|
});
|
|
|
|
$("#btn_add").click(function () {
|
|
$("#iptName").val("");
|
|
$("#iptRemark").val("");
|
|
layer.open({
|
|
type: 1,
|
|
title: '信息编辑',
|
|
area: ['420px', '300px'],
|
|
content: $('#divEdit') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
|
|
});
|
|
});
|
|
$(".clsDel").click(function () {
|
|
var zzName = (dataArr[$(this).attr("indx")].zzName);
|
|
layer.confirm('是否确认【' + zzName + '】删除？', { icon: 3, title: '提示信息' }, function (index) { });
|
|
});
|
|
$(".clsAdd").click(function () {
|
|
$("#iptName").val(dataArr[$(this).attr("indx")].zzName);
|
|
$("#iptRemark").val(dataArr[$(this).attr("indx")].zzRemark);
|
|
//console.log(dataArr[$(this).attr("indx")]);
|
|
layer.open({
|
|
type: 1,
|
|
title: '信息编辑',
|
|
area: ['420px', '300px'],
|
|
content: $('#divEdit') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|