easyui--6.完整案列演示

来源：互联网发布：云平台网络架构编辑：程序博客网时间：2024/06/01 07:21

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'"onclick="addStu()"> 新建</a>    <a class="easyui-linkbutton"data-options="iconCls:'icon-cancel'"onclick="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="编辑" onclick="editStu(\''+ row.stuId + '\')"></a>';    var cancel=  '<a class="cancel" title="删除" onclick="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"onclick="saveStu()">保存</a>    <a href="#" class="easyui-linkbutton"onclick="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");            }        });    }}

4.2.2 后台

源码：http://download.csdn.net/download/qq_26553781/10147154

阅读全文

0 0