easyUI 增删改查前台部分

最新推荐文章于 2021-02-15 19:04:36 发布

pf1234321

最新推荐文章于 2021-02-15 19:04:36 发布

阅读量551

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/pf1234321/article/details/41040321

版权

easyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

http://www.jeasyui.com/demo/main/index.php?plugin=Application&theme=default&dir=ltr&pitem=Basic%20CRUD

<!DOCTYPE html>

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <h2>Basic CRUD Application</h2>
    <p>Click the buttons on datagrid toolbar to do crud actions.</p>
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
    url="get_users.php"
    toolbar="#toolbar" pagination="true"
    rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
    <th field="firstname" width="50">First Name</th>
    <th field="lastname" width="50">Last Name</th>
    <th field="phone" width="50">Phone</th>
    <th field="email" width="50">Email</th>
    </tr>
    </thead>
    </table>
    <div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
    </div>
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
    closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post" novalidate>
    <div class="fitem">
    <label>First Name:</label>
    <input name="firstname" class="easyui-textbox" required="true">
    </div>
    <div class="fitem">
    <label>Last Name:</label>
    <input name="lastname" class="easyui-textbox" required="true">
    </div>
    <div class="fitem">
    <label>Phone:</label>
    <input name="phone" class="easyui-textbox">
    </div>
    <div class="fitem">
    <label>Email:</label>
    <input name="email" class="easyui-textbox" validType="email">
    </div>
    </form>
    </div>
    <div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" οnclick="saveUser()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    <script type="text/javascript">
    var url;
    function newUser(){
    $('#dlg').dialog('open').dialog('setTitle','New User');
    $('#fm').form('clear');
    url = 'save_user.php';
    }
    function editUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
    $('#dlg').dialog('open').dialog('setTitle','Edit User');
    $('#fm').form('load',row);
    url = 'update_user.php?id='+row.id;
    }
    }
    function saveUser(){
    $('#fm').form('submit',{
    url: url,
    onSubmit: function(){
    return $(this).form('validate');
    },
    success: function(result){
    var result = eval('('+result+')');
    if (result.errorMsg){
    $.messager.show({
    title: 'Error',
    msg: result.errorMsg
    });
    } else {
    $('#dlg').dialog('close'); // close the dialog
    $('#dg').datagrid('reload'); // reload the user data
    }
    }
    });
    }
    function destroyUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
    $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
    if (r){
    $.post('destroy_user.php',{id:row.id},function(result){
    if (result.success){
    $('#dg').datagrid('reload'); // reload the user data
    } else {
    $.messager.show({ // show error message
    title: 'Error',
    msg: result.errorMsg
    });
    }
    },'json');
    }
    });
    }
    }
    </script>
    <style type="text/css">
    #fm{
    margin:0;
    padding:10px 30px;
    }
    .ftitle{
    font-size:14px;
    font-weight:bold;
    padding:5px 0;
    margin-bottom:10px;
    border-bottom:1px solid #ccc;
    }
    .fitem{
    margin-bottom:5px;
    }
    .fitem label{
    display:inline-block;
    width:80px;
    }
    .fitem input{
    width:160px;
    }
    </style>
    </body>
    </html>

pf1234321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI 增删改查前台部分

http://www.jeasyui.com/demo/main/index.php?plugin=Application&theme=default&dir=ltr&pitem=Basic%20CRUD Basic CRUD Application - jQuery EasyUI CRUD Demo
复制链接

扫一扫