干货--easyui的增删改查

原创 15342886500 教程 javascript 220阅读 2018-05-10 11:16:59 举报

最近碰到很多小前端们让我推荐一款做后台管理的插件,虽然网上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%;">

                                        </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
                                                                    class="hidden-480"> 刪除 </span>
                                                            </a>
                                                            <a href="javascript:edit();" class="btn blue">
                                                                <i class="fa  fa-pencil-square-o"></i> <span
                                                                    class="hidden-480"> 修改 </span>
                                                            </a>
                                                            <a href="javascript:print();" class="btn blue">
                                                                <i class="fa  fa-pencil-square-o"></i> <span
                                                                    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
                                                                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小时,已经详细到每一个注释了,相信你们会看懂的,加油,向大前端进阶。

评论 ( 1 )
最新评论
qiang46 2018-07-05 15:43:04 1F

这ui你自己写的啊