easyui--6.完整案列演示

最新推荐文章于 2022-05-06 10:43:34 发布

qq_26553781

最新推荐文章于 2022-05-06 10:43:34 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_26553781/article/details/78725866

版权

1 布局

1.1 引入常用jar

<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<!--引入Jquery主文件-->
<script type="text/javascript"src="../easyui/jquery.min.js"></script>
<!--引入JqueryEasyUI主文件-->
<script type="text/javascript"src="../easyui/jquery.easyui.min.js"></script>
<!--让easyUI支持中文-->
<script type="text/javascript"src="easyui/locale/easyui-lang-zh_CN.js"></script>

1.2 Layout

<body class="easyui-layout">
    <div data-options="region:'north',title:'NorthTitle',split:false" style="height:100px;"></div>
    <div data-options="region:'south',title:'SouthTitle',split:true" style="height:100px;"></div>
    <!-- <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"style="width:100px;"></div>-->
    <div data-options="region:'west',title:'West',split:true"style="width:250px;"></div>
    <div data-options="region:'center'"style="padding:0px;background:#eee;">
</div>
</body>

1.3 操作效果图

删除可以看做批量操作的一种

2 展示数据

2.1 datagrid

<table id="dg" class="easyui-datagrid"style="width:100%;height:95%">
    <thead>
    <tr>
        <th data-options="field:'ck',checkbox:true,width:30,fixed:false"></th>
        <th data-options="field:'stuNum',width:50,fixed:false">学号</th>
        <th data-options="field:'stuName',width:300,fixed:false">姓名</th>
        <th data-options="field:'stuSex',width:300,fixed:false">性别</th>
        <th data-options="field:'stuAge',width:100,fixed:false">年龄</th>
        <th data-options="field:'stuQQ',width:100,fixed:false">QQ</th>
        <th data-options="field:'operation',width:100,fixed:false,formatter:actionFormatter">操作</th>
    </tr>
    </thead>
</table>

选择框：名称是固定的ck

<div id="tb">
    <a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-add'"οnclick="addStu()"> 新建</a>
    <a class="easyui-linkbutton"data-options="iconCls:'icon-cancel'"οnclick="delBatchStu()"> 批量删除</a>
</div>

2.2 初始化（datagrid+列属性）

$(function() {
    $("#dg").datagrid({
        url:'stu?flag=getAllStu',
        fitColumns:true,
        pagination:true,
        selectOnCheck:false,
        checkOnSelect:false,
        toolbar:'#tb',
        onLoadSuccess:function(data){
            $('.edit').linkbutton({plain:true,iconCls:'icon-edit'});
            $('.cancel').linkbutton({plain:true,iconCls:'icon-cancel'});
        }
    })
});

采用批量删除和删除二合一方式

function actionFormatter(value,row,index){
    var edit=  '<a class="edit" title="编辑" οnclick="editStu(\''+ row.stuId + '\')"></a>';
    var cancel=  '<a class="cancel" title="删除" οnclick="delOneStu(\''+row.stuId + '\')"></a>';
    return operation = edit + " " +cancel;
}

2.3 后台

3 增加修改

3.1 增加修改框

3.1.1 框

3.1.2 表单

<div id="dlg" class="easyui-dialog" style="width:400px;height:300px;background:gray"
     data-options="buttons:'#btns',closed:true,modal:true">
    <form id="fm" method="post">
        <table cellpadding="5" align="center">
            <caption>学员信息</caption>
            <tr>
                <td>学号:</td>
                <td><input class="easyui-textbox" type="text" name="stuNum" data-options="required:true" /></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input class="easyui-textbox" type="text" name="stuName" data-options="required:true,validType:'email'"/></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td><input class="easyui-textbox" type="text" name="stuSex" data-options="required:true" /></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input class="easyui-numberspinner" name="stuAge" data-options="min:1,max:150,required:true"  /></td>
            </tr>
            <tr>
                <td>QQ:</td>
                <td>
                    <input class="easyui-textbox" name="stuQQ" data-options="required:true"  />
                </td>
            </tr>
        </table>
    </form>
</div>

3.1.3 保存取消按钮

<div id="btns">
    <a href="#" class="easyui-linkbutton"οnclick="saveStu()">保存</a>
    <a href="#" class="easyui-linkbutton"οnclick="javascript:$('#dlg').dialog({closed:true})">取消</a>
</div>

3.2 Js

3.2.1 增加操作

var url;            //只是用于增加/或修改的 保存操作的地址变化
function addStu(){
    $("#dlg").dialog({
        title:"增加",
        closed:false
    });
    //清空表单
    $("#fm").form("reset");
    url="stu?flag=addStu";
}

3.2.2 修改操作

function editStu(id){
    if(id){                                        //判断是否有数据，没数据为空
        //发起获取数据请求,并进行相应的数据显示
        $.ajax({
            url: 'stu',
            type: 'get',
            data: {
                flag:'getStuById',
                id:id
            },
            timeout: 20000,
            success: function (data) {
                // var data = $.parseJSON(data)
                var data = JSON.parse(data);
                $("#dlg").dialog({
                    title:"修改",
                    closed:false
                });
                $("#fm").form("load",data['row']);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("访问后台发生错误:" + XMLHttpRequest.status)
            }
        });
        url="stu?flag=uptStu&&id="+id;
    }
}

3.2.3 保存操作

//保存操作  不要狭义的理解  增加有保存操作  修改有保存操作
function saveStu(){
    $('#fm').form('submit', {
        url:url,
        onSubmit: function(){
            //表单验证
        },
        success:function(data){
            var data=eval("("+data+")");
            if(data.result){
                $('#dlg').dialog({closed:true});
                $("#dg").datagrid("reload");
            }
        }
    });
}

使用jquery ajax中的serialize()序列化将前台表单数据传递给后台，

4 删除

4.1 统一操作

4.1.1 批量删除

function delBatchStu() {
    var rows= $('#dg').datagrid('getChecked');
    if (rows.length== 0) {
        $.messager.alert("警告","请先选择要删除的记录!");
        return;
    }
    var ids = '';
    for (var i = 0; i < rows.length; i++) {
        ids += rows[i]['stuId'] + ",";
    }
    ids = ids.substring(0, ids.length - 1);
    deleteStu(ids);
}

4.1.2 删除

function delOneStu(id){
    deleteStu(id)
}

4.1.3 删除操作

//删除操作
function deleteStu(ids) {
    $.messager.confirm("警告","您真的确定要删除吗？",function () {
        $.ajax({
            url: "stu",
            type: "post",
            data: {
                flag:"deleteStu",
                ids: ids
            },
            datatype:'json',
            success: function (data) {
                var data=eval("("+data+")");
                alert(data.msg);
                //重新加载记录
                $("#dg").datagrid("reload");
            }
        });
    });
}

4.1.4 后台

4.2 删除按钮

4.2.1 Js

function delStu(id){
    // varrow=$("#dg").datagrid("getSelected");
    if(id){
        $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
            if (r){
                $.post('stu?flag=delStu',{id:id},function(data){
                    //alert(data);
                    if(data.result)
                    {
                        $("#dg").datagrid("reload");
                    }
                },"json");
            }
        });
    }
}