最近碰到很多小前端们让我推荐一款做后台管理的插件, 虽然网上 layui 这样的东西一大堆, 但是华而不实, 鸡肋又花瓶, 所以我推荐了 easui.
让人可笑的是, 他们居然觉得增删改查就是点一下增删改, 调一下接口, 那么这些功能自己就出来了. 苦笑, 好吧, 实际上插件没有那么智能, 只提供了增删改查的 api, 逻辑思维需要自己完成.
今天就先从增开始讲起, 首先, 我的框架架构是 bootstrap+easyui+layer.
1.easyui 强大彪悍但是界面很丑, 这是老前辈们公认的, 那怎么办呢, 作为前端, 当然有理由给它换一个漂亮的 ui, 那不是 so easyu 吗, 后台开发的话就懵逼了.
easyui 原始界面
重写的 bootatrapui 组件以后的效果
2.eaui 的插件引用, 这个不多说.
3.layer.js 是弹层插件, 为了提高用户体验, 确切地说, 这 3 个插件的组合就是一个项目的完整前端架构, 同学们也可以了解下架构的技术选型.
贴代码
1.head 头部
- !-- Bootstrap core CSS -->
- link rel="stylesheet" href="../css/font-awesome.min.css">
- link rel="stylesheet" href="../css/simple-line-icons.css">
- link rel="stylesheet" href="../css/bootstrap.min.css">
- link rel="stylesheet" href="../css/components.css">
- !-- plugins CSS -->
- link rel="stylesheet" href="../css/easyui/easyui_tree.css">
- link rel="stylesheet" href="../css/easyui/easyui_datagrid.css">
- link rel="stylesheet" href="../css/ui-dialog.css">
- link rel="stylesheet" href="../css/layer.css">
- link rel="stylesheet" href="../css/style.css">
- 2.body
- <div class="main">
- <div class=" ">
- <div class="pr clearfix">
- <div class="fr right-box" id="workLst2" style="width: 100%; padding: 0">
- <div class="comp-content col-md-12">
- <div class="portlet">
- <div class="header"><p > 人员管理 </p>
- </div>
- <div class="portlet-body">
- <!-- .form-body Start -->
- <div class="form-body pd-15">
- <div class="clearfix">
- <div class="col-md-12">
- <div class="table-scrollable">
- <table id="dg" class="easyui-datagrid" title=""style="width:100%;height:100%;">
- ``code`` </table>
- <div id="tb" style="padding:5px;height:auto;background: #fff">
- <div id="query-form" class="form-horizontal formborder">
- <div class="portlet-title">
- <div class=" ">
- <div class="col-xs-8">
- <a id="btnAdd" href="javascript:append();" class="btn btn-success">
- <i class="fa fa-edit"></i> <span> 新增 </span>
- </a>
- <a href="javascript:removeit();" class="btn btn-danger">
- <i class="fa fa-trash-o"></i> <span
- ``code`` class="hidden-480"> 刪除 </span>
- </a>
- <a href="javascript:edit();" class="btn blue">
- <i class="fa fa-pencil-square-o"></i> <span
- ``code`` class="hidden-480"> 修改 </span>
- </a>
- <a href="javascript:print();" class="btn blue">
- <i class="fa fa-pencil-square-o"></i> <span
- ``code`` class="hidden-480"> 输出数据 </span>
- </a>
- </div>
- <div class="col-xs-2 pdr-10">
- <input id="search_name" name="nickname" type="text" class="form-control" value="">
- </div>
- <a href="javascript:doSearch();" class="btn blue">
- <i class="fa fa-search"></i> <span
- ``code`` class="hidden-480"> 查询 </span>
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- .form-body End -->
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
3. 底部 JS 引用, 解释下为什么 js 放底部, 很多小前端们可能还没这个习惯, js 放页面最后面是因为 js 加载时会阻断线程, css 就会停止加载, 用户明显感觉页面很卡, 放在底部页面会优先加载 css, 这就叫优化页面加载速度.
- script src="../js/jquery.min.js"></script>
- script src="../js/bootstrap.js"></script>
- script src="../js/jquery.easyui.min.js"></script>
- script src="../js/layer.js"></script>
逻辑代码
下面就是重点 , 如何完成一个增加功能, 首先, 调用 easyui 的 api 加载表格数据
- var editIndex = undefined;// 判断表格是否被选中变量
- var tableHeight=document.documentElement.clientHeight;
- $(".table-scrollable").css("height",tableHeight-145+"px");// 表格高度自适应页面
- $(function(){
- $('#dg').datagrid({//easyui 的 datagrid 方法, 用来加载表格的数据
- url:'../data/data2.json',// 数据的地址
- rownumbers:true,// 是否显示行号
- singleSelect:true,// 开启单选还是多选
- pagination:true,// 开启分页
- method:'get',// 数据请求类型 (post/get)
- striped:true,// 隔行变色
- toolbar:'#tb',// 加载工具条, 就是上面的增删改查按钮
- onClickRow:nowRow,// 选中当前的行事件, nowRow 是我定义的 function
- columns:[[
- {field:'datased',title:'星期',width:'20%'},//field 是接收数据的 json 的参数值, title 是 table 表格的 td 名称, width 是宽度, 支持百分比和 px
- {field:'time',title:'时间',width:'20%'},
- {field:'breakfast',title:'早餐',width:'20%'},
- {field:'lunch',title:'午餐',width:'20%'},
- {field:'dinner',title:'晚餐',width:'20%'}
- ]] });
- })
- function nowRow(index){// 当前选中的行数
- if (editIndex != index){
- $('#dg').datagrid('selectRow', index)
- // .datagrid('beginEdit', index);
- editIndex = index;
- }
- }
加载完成的效果上面有截图, 这个 nowRow 打印的数据是个 json, 方便对数据进行检测用的
2. 增加的 append 方法, 首先分析下逻辑
1. 用户点击新增后, 弹出弹层.
2. 弹层显示的内容要对应数据的格式, 比如星期, 时间, 早餐等等.
3. 用户在弹层的 input 框中输入想增加的信息.
4. 点击确定按钮, 将信息存入原表格的最后一行.
1. 调用弹层
- layer.open({
- type: 0,// 弹层类型
- title: '新增',// 弹层标题
- area: ['40%', '45%'],// 弹层的宽高, 支持 px 和百分比
- shadeClose: true,// 关闭阴影效果
- content: text,// 显示的内容, 格式 < html></html > 标签格式, 我这里的 text 是个变量
- btn:["确定","取消"],// 显示的按钮名称
- yes:function(index){// 点击确定按钮事件
- editIndex = $('#dg').datagrid('getRows').length;// 获取当前表格内容的总行数
- $('#dg').datagrid('appendRow',{// 调用 easyui 的增加行的方法
- itemid:editIndex+1,// 行号
- datased:$("#datased").val(),// 对应的 json 数据的格式 (参数: 参数值)
- time:getNowFormatDate(),
- breakfast:$("#breakfast").val(),
- lunch:$("#lunch").val(),
- dinner:$("#dinner").val()
- });
- $('#dg').datagrid('acceptChanges');// 更新数据
- layer.msg('新增成功', {icon: 1});// 确定按钮执行关闭并删除
- layer.close(index)// 手动关闭弹层
- }
- });
2. 弹层的内容, 上面说了, 我定义了一个 text 变量, 直接字符串拼接, 基本知识
代码贴不上去, 被过滤了, 上截图
3. 每个 input 上面有 id
4. 调用 easyui 的 appendRow 的方法, 把 input 的值存入表格中, 上面的代码已经贴出来了. 看下最后的效果.
新增在这里就讲完了, 下一篇是编辑和删除, 为了方便同学们练习, 把 json 的数据格式也贴出来
- [
- {
- "datased": "星期九",
- "time": "2018-05-09",
- "breakfast": "海参",
- "lunch": "炒饭",
- "dinner": "辣根"
- },
- {
- "datased": "星期八",
- "time": "2018-05-09",
- "breakfast": "火锅",
- "lunch": "烧烤",
- "dinner": "满汉全席"
- }
- ]
上面就是 url 中 data2.json 的数据格式.
结束, 码字 2 小时, 已经详细到每一个注释了, 相信你们会看懂的, 加油, 向大前端进阶.
来源: http://www.qdfuns.com/article/36290/3104b414349093b6abf236eae93c6dad.html