easyui点击添加行,动态增删改查

关于这个问题,曾经借鉴过很多,但是都不理想。加上最近项目需要使用这个技术,就自己整理了一下,并成功实现。好了,废话不多说,直接给大家上代码参考吧。
里边加了许多自己项目ztree的判断,请自行略过。

<script type="text/javascript">
     $obj = $("#remark_dg");
     var indexs;
        $obj.datagrid({
            url:'<%=path%>/mbFlup/fetchCycByMbId.do',
             columns: [[ //显示的列
        {
            field: 'ID',
            title: '编号',
            width: 100,
            sortable: true,
            checkbox: true
        },
        {
            field: 'FLUP_TIMES',
            title: '次数',
            width: 100,
            sortable: true,
            editor: {
                type: 'validatebox',
                options: {

                }
            }
        },
        {
            field: 'FLUP_INTERVAL',
            title: '出院后天数',
            width: 100,
            editor: {
                type: 'validatebox',
                options: {

                }
            }
        },
        {
            field: 'FLUP_FREQUENCY',
            title: '随访频率',
            width: 100,
            editor: {
                type: 'validatebox',
                options: {

                }
            }
        }]],
            toolbar:'#tb',  //表格菜单
            fit:true,
            fitColumns:true,
            loadMsg:'加载中...', //加载提示
            rownumbers:true, //显示行号列
            singleSelect:true,//是允许选择一行
            onClickCell: onClickCell,
            queryParams:{   //在请求数据是发送的额外参数,如果没有则不用写
            },
            onLoadSuccess:function(data){
            },
            rowStyler:function(index,row){
            }
        });
         //可编辑行
        var editIndex = undefined;
        function endEditing(){
            if (editIndex == undefined){return true}
            if ($('#remark_dg').datagrid('validateRow', editIndex)){
                $('#remark_dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
       //修改的方式是直接点击单元格,所以table要加上onClickCell属性,然后重写onClickCell方法
        function onClickCell(index, field){

            if (editIndex != index){
                if (endEditing()){
                    $('#remark_dg').datagrid('selectRow', index)
                            .datagrid('beginEdit', index);
                    var ed = $('#remark_dg').datagrid('getEditor', {index:index,field:field});
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                    editIndex = index;
                } else {
                    $('#remark_dg').datagrid('selectRow', editIndex);
                }
            }
        }
      // 添加
      function addRemark(){
            if (endEditing()){
                $('#remark_dg').datagrid('appendRow',{status:'P'});
                editIndex = $('#remark_dg').datagrid('getRows').length-1;
                $('#remark_dg').datagrid('selectRow', editIndex)
                               .datagrid('beginEdit', editIndex);
            }
        }
        // 删除
         function removeit(){  

            $.messager.confirm('Confirm','确认删除?',function(r){  
                if (r){   
                       var row = $('#remark_dg').datagrid('getSelected');  
                       var rindex = $('#remark_dg').datagrid('getRowIndex', row);
                       //alert(rindex);   
                       //$obj.datagrid('deleteRow', rindex);           
                    $.ajax({  
                        url : '<%=path%>/mbFlup/deleteFlupCycle.do',  
                        type : 'POST',                     
                        timeout : 60000,  
                        success : function(data) {     
                            var msg = '删除';  
                            if (data) {  
                                $obj.datagrid('deleteRow', rindex);  
                                //$obj.datagrid('reload');  
                                $.messager.alert('提示', msg + '成功!', 'info', function() {  
                                    //window.location.href = root + 'esbService/initSysConfig.do';  
                                });  
                            } else {  
                                $.messager.alert('提示', msg + '失败!', 'error', function() {  
                                    //window.location.href = root + 'esbService/initSysConfig.do';  
                                });  
                            }  
                        }  
                    });   
                }  
            });  

        }
        // 保存方法(添加修改用了一个方法accept())
        function accept(){
            if (endEditing()){
                var row = $('#remark_dg').datagrid('getSelected');
                var FLUP_TIMES = row.FLUP_TIMES;
                var FLUP_INTERVAL = row.FLUP_INTERVAL;
                var FLUP_FREQUENCY=row.FLUP_FREQUENCY;
                var id=row.ID;
                var mbid=$("#mbid").val();
                if(mbid!='')
                {
                    if(FLUP_TIMES!='' ||FLUP_INTERVAL!=''||FLUP_FREQUENCY!='')
                    {
                         $.ajax({
                                url:"<%=path%>/mbFlup/saveFlupCycle.do",
                                type:"post",
                                dataType:"json",
                                data:{
                                    id:id,
                                    times:FLUP_TIMES,
                                    interval:FLUP_INTERVAL,
                                    frequency:FLUP_FREQUENCY,
                                    mbid:mbid
                                },
                                success:function(data){
                                    alert(data)
                                    if(data){
                                        $.messager.show({
                                            title : '提示',
                                            msg : '操作成功'
                                        });
                                        $('#remark_dg').datagrid('load', {});
                                       $('#list_sfsqKs').datagrid('reload',{code:code}); 
                                    }else{
                                        $.messager.show({
                                            title : '提示',
                                            msg : '操作失败,请联系管理员 ------'
                                        });
                                    }
                                },
                                error:function(){
                                     $.messager.show({
                                         title : '提示',
                                         msg : '系统错误,请联系管理员------'
                                     });
                                }
                            });
                        }else{
                            $.messager.alert('操作提示','请添加随访周期!'); 
                            }

                 }else{
                     $.messager.alert('操作提示','请选择左侧模板!'); 
                     }

            }
        }
        function saveConten(){
            var mbid=$("#mbid").val();
            var content=$("#content").val();
            var xx = $('#tb input[name="x"]:checked').val();
             $.ajax({
                    url:"<%=path%>/mbFlup/updateMbTname.do",
                    type:"post",
                    dataType:"json",
                    data:{
                        mbid:mbid,
                        content:content,
                        xx:xx
                    },
                    success:function(data){
                        var treeObj = $.fn.zTree.getZTreeObj("z_tree"); //参数为树的id
                        var nodes = treeObj.getSelectedNodes();  
                        //判断选中的是否为子节点  
                        //若为父节点flag = true  
                        if(nodes.length > 0){  
                           var flag = nodes[0].isParent; 
                            if(flag == true){
                                  $.messager.show({
                                    title : '提示',
                                    msg : '父节点不能保存 ------'
                                });
                            }else{
                                 $.messager.show({
                                    title : '提示',
                                    msg : '操作成功'
                                });
                            }
                        } 


                    },
                    error:function(){
                      $.messager.show({
                          title : '提示',
                          msg : '系统错误,请联系管理员------'
                      });
                    }
                });
        }
</script>
<table id="remark_dg"></table>

这里写图片描述

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EasyUI 是一个基于 jQuery 的 UI 库,可以快速地构建出美观的 web 应用程序。对于账户的增删改查功能,可以结合 EasyUI 提供的表格、表单、对话框等组件来实现。 以下是一个简单的账户管理示例: HTML: ```html <!-- 显示账户列表的表格 --> <table id="accountTable" class="easyui-datagrid" style="width:100%;height:400px" url="getAccounts.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="id" width="50" sortable="true">ID</th> <th field="name" width="100" sortable="true">姓名</th> <th field="email" width="150" sortable="true">邮箱</th> <th field="phone" width="100" sortable="true">电话</th> </tr> </thead> </table> <!-- 工具栏,包含新增、编辑、删除按钮 --> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newAccount()">新增</a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editAccount()">编辑</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyAccount()">删除</a> </div> <!-- 新增/编辑账户的对话框 --> <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <div class="ftitle">账户信息</div> <form id="fm" method="post" novalidate> <div class="fitem"> <label>姓名:</label> <input name="name" class="easyui-textbox" required="true"> </div> <div class="fitem"> <label>邮箱:</label> <input name="email" class="easyui-textbox" validType="email"> </div> <div class="fitem"> <label>电话:</label> <input name="phone" class="easyui-textbox"> </div> </form> </div> <!-- 对话框底部的按钮 --> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveAccount()" style="width:90px">保存</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')" style="width:90px">取消</a> </div> ``` JavaScript: ```javascript // 弹出新增账户对话框 function newAccount() { $('#dlg').dialog('open').dialog('setTitle', '新增账户'); $('#fm').form('clear'); } // 弹出编辑账户对话框 function editAccount() { var row = $('#accountTable').datagrid('getSelected'); if (row) { $('#dlg').dialog('open').dialog('setTitle', '编辑账户'); $('#fm').form('load', row); } } // 保存新增/编辑的账户信息 function saveAccount() { $('#fm').form('submit', { url: 'saveAccount.php', onSubmit: function () { return $(this).form('validate'); }, success: function (result) { var result = eval('(' + result + ')'); if (result.success) { $('#dlg').dialog('close'); // 关闭对话框 $('#accountTable').datagrid('reload'); // 刷新表格 } else { $.messager.show({ title: 'Error', msg: result.msg }); } } }); } // 删除选中的账户 function destroyAccount() { var row = $('#accountTable').datagrid('getSelected'); if (row) { $.messager.confirm('Confirm', '确定要删除此账户吗?', function (r) { if (r) { $.post('destroyAccount.php', {id: row.id}, function (result) { if (result.success) { $('#accountTable').datagrid('reload'); // 刷新表格 } else { $.messager.show({ title: 'Error', msg: result.msg }); } }, 'json'); } }); } } ``` PHP: ```php <?php // getAccounts.php:获取账户列表 require_once('dbconfig.php'); $conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME); if (!$conn) { die('连接数据库失败:' . mysqli_connect_error()); } $page = isset($_POST['page']) ? intval($_POST['page']) : 1; $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10; $offset = ($page - 1) * $rows; $result = array(); $result['total'] = mysqli_num_rows(mysqli_query($conn, "SELECT * FROM accounts")); $sql = "SELECT * FROM accounts LIMIT $offset,$rows"; $rs = mysqli_query($conn, $sql); $rows = array(); while ($row = mysqli_fetch_assoc($rs)) { $rows[] = $row; } $result['rows'] = $rows; mysqli_close($conn); echo json_encode($result); ?> <?php // saveAccount.php:保存新增/编辑的账户信息 require_once('dbconfig.php'); $conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME); if (!$conn) { die('连接数据库失败:' . mysqli_connect_error()); } $id = isset($_POST['id']) ? intval($_POST['id']) : 0; $name = isset($_POST['name']) ? mysqli_real_escape_string($conn, $_POST['name']) : ''; $email = isset($_POST['email']) ? mysqli_real_escape_string($conn, $_POST['email']) : ''; $phone = isset($_POST['phone']) ? mysqli_real_escape_string($conn, $_POST['phone']) : ''; if ($id > 0) { $sql = "UPDATE accounts SET name='$name',email='$email',phone='$phone' WHERE id=$id"; } else { $sql = "INSERT INTO accounts(name,email,phone) VALUES ('$name','$email','$phone')"; } if (mysqli_query($conn, $sql)) { $result = array('success' => true); } else { $result = array('success' => false, 'msg' => '保存失败:' . mysqli_error($conn)); } mysqli_close($conn); echo json_encode($result); ?> <?php // destroyAccount.php:删除指定账户 require_once('dbconfig.php'); $conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME); if (!$conn) { die('连接数据库失败:' . mysqli_connect_error()); } $id = isset($_POST['id']) ? intval($_POST['id']) : 0; if ($id > 0) { $sql = "DELETE FROM accounts WHERE id=$id"; if (mysqli_query($conn, $sql)) { $result = array('success' => true); } else { $result = array('success' => false, 'msg' => '删除失败:' . mysqli_error($conn)); } } else { $result = array('success' => false, 'msg' => '无效的账户ID'); } mysqli_close($conn); echo json_encode($result); ?> ``` 这个示例中,使用了 EasyUI 提供的 `datagrid` 组件来显示账户列表,通过 `url` 属性指定了获取数据的 PHP 文件。在工具栏中,添加了新增、编辑和删除按钮,分别对应三个 JavaScript 函数 `newAccount()`、`editAccount()` 和 `destroyAccount()`。新增和编辑时,会弹出一个对话框,使用 `form` 组件来输入账户信息,并通过 `submit` 方法提交表单数据到 `saveAccount.php` 文件进保存。其中,提交表单数据时,使用了 `onSubmit` 属性来验证表单数据的有效性,`success` 回调函数中判断保存结果是否成功,并刷新账户列表。删除时,会弹出一个确认框,确认删除后,通过 `post` 方法将账户 ID 提交到 `destroyAccount.php` 文件进删除操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值