EasyUi---datagird 行数据修改

最新推荐文章于 2022-05-11 23:21:07 发布
原创 最新推荐文章于 2022-05-11 23:21:07 发布 · 7.3k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#easyui #datagrid #行数据
本文介绍了一个用户管理系统的设计与实现过程，包括前后端交互、数据验证、用户增删改查等功能。通过JavaScript和PHP实现了用户信息的动态管理和数据库操作。

UI展示：
这里写图片描述

参考代码：
前台UI：

<script type="text/javascript" charset="utf-8">
$(function(){ 
    var editRow = '';
    var permission = [{ "value": "管理员", "text": "管理员" }, { "value": "IT业务", "text": "IT业务" }];
    $('#user_table').datagrid({    
        url:'./USER/uGetInfo.php',
        border:false,
        fitColumns:true,
        singleSelect:true,
        pagination:true,
        idField:'id',
        pageSize:10,
        pageList:[10,15,20,25,100],
        columns:[[
            {field:'id',title:'序号',width:80},
            {field:'id_db',title:'数据库id',width:80,hidden:true},
            {field:'chinese_name',title:'中文名称',width:100,editor:{type:'validatebox',options:{required:true,validType:'strChinese'}}},
            {field:'username',title:'账号',width:100,editor:{type:'validatebox',options:{required:true,validType:'strEngNum'}}},
            {field:'password',title:'密码',width:300,editor:{type:'validatebox',options:{required:true}}},
            {field:'email',title:'邮箱',width:300,editor:{type:'validatebox',options:{required:true}}},
            {field:'permission',title:'权限',width:200,editor:{type:'combobox',options:{data: permission, valueField: "value", textField: "text",select:'admin'}}}
        ]],
        onAfterEdit:function(rowIndex, rowData, changes){           
            editRow = '';
            var new_line = JSON.stringify(rowData);
            $.ajax({
                type: "POST",
                cache: false,
                url: "./USER/uGetInfo.php",
                data: 'new_line=' + new_line,
                dataType:'json',
                success: function(msg){
                     if(msg.success){
                         $.messager.alert('恭喜你',msg.message);
                         $('#user_table').datagrid('reload',{});
                     }else{
                         $.messager.alert('错误',msg.message);
                     }
                }                           
            }); 
        }
    });
    /*************************点击添加用户******************************/
    $('#user_add').bind('click', function(){
        if(editRow == ''){
            $('#user_table').datagrid('appendRow',{});
            var rows = $('#user_table').datagrid('getRows');
            editRow = rows.length - 1;
            $('#user_table').datagrid('beginEdit',editRow);
        }else{
            $.messager.alert('警告','请先保存当前行记录然后才可以继续添加下一条记录！');  
        }
    });
    /*************************点击修改用户******************************/
    $('#user_edit').bind('click', function(){
            var row_select = $('#user_table').datagrid('getSelected');//返回的是被选中行的对象
            if(row_select == null){
                $.messager.alert('警告','请先选中需要修改行！','warning'); 
                return false;
            }else{
                var index_select = $('#user_table').datagrid('getRowIndex',row_select.id);//返回的是被选中行的索引
                editRow = index_select;
                $('#user_table').datagrid('beginEdit',editRow);
            }
    });
    /*************************点击删除用户******************************/
    $('#user_delete').bind('click', function(){
            var row_select = $('#user_table').datagrid('getSelected');//返回的是被选中行的对象
            if(row_select == null){
                $.messager.alert('警告','请先选中需要删除的行！','warning'); 
                return false;
            }else{
                $.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
                    if (r){                         
                        $.ajax({
                            type: "POST",
                            cache: false,
                            url: "./USER/uGetInfo.php",
                            data: 'delete_line_id_db=' + row_select.id_db,
                            dataType:'json',
                            success: function(msg){
                                 if(msg.success){
                                     $.messager.alert('恭喜你',msg.message);
                                     $('#user_table').datagrid('reload',{});
                                 }else{
                                     $.messager.alert('错误',msg.message);
                                 }
                            }   
                        });
                    }    
                });  
            }
    });
    /*************************点击保存用户******************************/
    $('#user_save').bind('click', function(){
        $('#user_table').datagrid('endEdit',editRow);
    });
    /**************对validatebox控件正则表达式验证数据有效性扩展**************/
    $.extend($.fn.validatebox.defaults.rules, {    
        strChinese: {    
            validator: function(value){            
                var re = /[^\u4e00-\u9fa5]/;  
                if(re.test(value))
                    return false;  
                else
                    return true;   
            },    
            message: '只能输入中文！'
        },
        strEngNum: {    
            validator: function(value){            
                var re = /[^\w+$]/;  
                if(re.test(value))
                    return false;  
                else
                    return true;   
            },    
            message: '只能输入英文、数字或下划线！'
        }
    });  
});
</script>
<div class="it_model_top">
    <a id="user_add" href="#" class="easyui-linkbutton" style="margin-left: 10px;margin-right:10px;" data-options="iconCls:'icon-add'">增加</a>
    <a id="user_edit" href="#" class="easyui-linkbutton" style="margin-left: 10px;margin-right:10px;" data-options="iconCls:'icon-edit'">修改</a>
    <a id="user_delete" href="#" class="easyui-linkbutton" style="margin-left: 10px;margin-right:10px;" data-options="iconCls:'icon-cancel'">删除</a>
    <a id="user_save" href="#" class="easyui-linkbutton" style="margin-left: 10px;margin-right:10px;" data-options="iconCls:'icon-save'">保存</a>
</div>

<table id="user_table"></table>

后台：
uGetInfo.php

<?php 
//构造json对象，因为javascript处理类型为json
require_once '../../class/c_mysql.class.php';
if(isset($_POST['page']) && isset($_POST['rows'])){
    $page = $_POST['page'];
    $rows = $_POST['rows'];
    $limit_begain = ($page - 1) * $rows;
    $sql = "select * from user order by `id` asc limit $limit_begain,$rows";
    $sql_count = "select count(*) from user";
    get_json($sql,$sql_count);
}

/****************************添加和修改用户******************************/
if(isset($_POST['new_line'])){
    $add = json_decode($_POST['new_line']);
    $result = addNewAccount($add);
    $json = new json_message();
    if($result === false){//插入数据失败
        $json->success = false;
        $json->message = "USER/uGetInfo.php-->addNewAccount()-->操作数据库失败！";
    }
    if($result === true){//插入数据失败
        $json->success = true;
        $json->message = "新增用户成功！";
    }
    if($result === true && isset($add->id_db)){//插入数据失败
        $json->success = true;
        $json->message = "修改用户成功！";
    }
    echo json_encode($json);
}

/****************************删除用户****************************************/
if(isset($_POST['delete_line_id_db'])){
    $id_db = $_POST['delete_line_id_db'];
    $result = deleteAccount($id_db);
    $json = new json_message();
    if($result === false){//插入数据失败
        $json->success = false;
        $json->message = "USER/uGetInfo.php-->deleteAccount()-->操作数据库失败！";
    }
    if($result === true){//插入数据失败
        $json->success = true;
        $json->message = "删除用户成功！";
    }
    echo json_encode($json);
}

/****************************向user表中插入新用户******************************/
function addNewAccount($add){
    $chinese_name = $add->chinese_name;
    $username = $add->username;
    $password = sha1($add->password);
    $permission = $add->permission;
    $email = $add->email;
    $db = new c_mysql();   
    //判断是添加操作还是修改操作
    if(isset($add->id_db)){//如果传过来的参数有id_db属性，表示是修改数据的操作
        $id = $add->id_db;
        $sql = "update user set `chinese_name`='$chinese_name',`username`='$username',`password`='$password',`permission`='$permission',`email`='$email' where `id` = '$id'";
    }else{
        $sql = "insert into user(`chinese_name`,`username`,`password`,`permission`,`email`) values('$chinese_name','$username','$password','$permission','$email')";
    }
    $db->connect();
    $result = $db->query($sql);
    $db->close();
    return $result;//true:插入数据成功；false:插入数据失败
}

/****************************删除用户记录*********************************/
function deleteAccount($id_db){
    $db = new c_mysql();
    $sql = "delete from user where `id` = '$id_db'";
    $db->connect();
    $result = $db->query($sql);
    $db->close();
    return $result;//true:插入数据成功；false:插入数据失败
}

function get_json($sql,$sql_count){
    $db = new c_mysql();
    $db->connect();
    $db->query($sql);
    $db->close();
    $grid_data = array();
    $count = 1;
    while($row = $db->fetch_array()){
        $row['id_db'] = $row['id'];
        $row['id'] = $count;
        array_push($grid_data,$row);
        $count++;
    }
    //计算总数
    $db->connect();
    $db->query($sql_count);
    $db->close();
    $row = $db->fetch_row();
    $total = $row[0];
    //合并json
    $json = new json_data();
    $json->total = $total;
    $json->rows = $grid_data;
    echo json_encode($json);
}

class json_data{
    public $total = 10;
    public $rows = array();
}

class json_message{
    public $success = false;
    public $message = 'nothing';
}

?>
90后逆袭
关注
datagrid之修改
m0_52681702的博客
09-16 320
课程目标：1.dialog控件的使用 2.form控件的使用
easyui_datagrid数据表格的增删改案例
m0_46699799的博客
06-28 533
datagrid数据表格的增删改案例增加案例代码效果修改案例代码效果删除案例代码效果遇到的各种bug解决 之前我们做增加或修改都是另外写一个界面，然后跳转到那个界面进行数据输入然后在去处理业务逻辑，但是这样的话，就比较麻烦，而且页面太多也比较混乱，所以今天的增加，修改案例我们利用dialog模态框组件配合form表单进行增加，修改 增加案例 代码 首先我们先把后台写好 Dao UserDao add方法 利用自定义MVC框架 然后是一个用来判断是否成功的工具类（泛型），这个工具类的构造方法都是私有的，不可
Easyui之datagrid修改
A2895922320的博客
09-15 1477
目标：使用datagrid进行数据的修改 第一步：查看easyui的API，找到formatter,然后粘贴到所用到的js代码中 第二步：然后在js代码中把刚刚粘贴的代码改成需要的样子 结果展示： 第三步：再到API中找到dialog然后拷到所用的页面中 用法有两个（我们这使用第一个） 但这默认是打开的要把它改为默认不打开 只需把modal里的true改为false就可以了 或者找到closed属性添加进去就行了 第四步：给修改加一个点击事件，让点击...
JQuery DataGrid 中文文档
LEE_ZCF
04-05 5015
数据表格 继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。 依赖关系 控制面板缩放链接按钮分页 使用方法 table id="tt">table>   $('#tt').datagrid({       url:'datagrid_data.js
easyui的data-options在动态构建Html时的使用
anyway, life must全力以赴
09-03 1768
了解一下。备用：http://blog.csdn.net/luohuajiexiejuan/article/details/18077083
easy ui之数据网格DataGird
weixin_46038717的博客
03-09 371
数据网格DataGird之详细信息展示表格 <table id="grid" style="width: 1024px"></table> 实现对DataGird控件的绑定操作 function InitGrid(queryData) { $('#grid').datagrid({ //定位到Table标签，Table标签的ID是grid url: '/S...
java easyui分页源码_SpringMVC结合easyUI中datagird实现分页
weixin_39909212的博客
02-16 160
SpringMVC结合easyUI中datagird实现分页DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。轻量级，单元格合并、多列标题、冻结列和页脚只是其中一小部分功能。一、提前1、SpringMVC注解@RequestMapping(value = "/listUser.htm"),返回值ModelView，解析返回一页面。 注解@ResponseBod...
EasyUi的datagird页面表单、弹出添加修改框、特定列编辑传值给后端、ajax传对象向后台
weixin_45764675的博客
09-07 817
一、前段页面EasyUi做的 单位 建设性质 项目编码 项目名称为es索引，搜索数据库筛选过滤条件。 时间插件只能选择年份，选择对应的年份会展示所有该年份的项目对应投资金额，并且会有汇总行，展示所欲查到的数据投资金额汇总 只要不选不选择时间插件的过滤，所有的汇总值显示的是该项目所有年份汇总值的总和 只有选择年份以后查到的结果 才可以对投资金额单元格进行编辑，点击按钮可以保存，如果该年投资值存在则修改 不存在则添加该项目该年的投资值 废话不多说直接上代码： 主页面project.html <!
EasyUI学习之DataGird
lzg1169350237的专栏
12-25 600
使用ssh对easyUI的dataGrid控件数据封装示例。
EasyUI之DataGrid（数据表格）
licmi的博客
06-27 2839
文章目录DataGrid介绍使用案例代码实现Ribbon 界面总结 DataGrid介绍 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 使用案例 实现创建DataGrid，有两种方式 第一种：在HTML中定义列 <table class="easyui-datagrid"> <
扩展jQuery easyui datagrid增加动态改变列编辑的类型
活跃的技术客
09-09 625
$.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $.each(param, function(index, item) { var e = $(jq).datagrid('getColumnOption', item.field); ...
jquery easyui datagrid基本功能
金石软件
07-14 4770
Easyui Demo网站： http://www.jeasyui.com/  英文 http://www.phptogether.com/juidoc/  中文 datagrip的基本属性方法：http://www.phptogether.com/juidoc/datagrid.html 推荐：http://www.cnblogs.com/Philoo/t
【easyui】之DataGrid数据增删改
yifei_345678的博客
05-11 1383
easyui最后一波！
easyui 获取options_[转]easyui data-options的使用
weixin_40004502的博客
12-21 2164
data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如：12data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">3dialog content.4为什么要特殊...
在easyUI中使用DataGrid组件更改单元格中的值
Kuangtian的博客
12-15 3129
var rows = $('#idName').datagrid("getRows");//获取页行数 $('#idName').datagrid('endEdit', 修改行号);$('#idName').datagrid('updateRow',{index:修改行号,row:{field:val}}); 在更改单元格式先把改行结束编辑否则报错
easyui-datagrid的绑定
英雄主义
03-19 642
html: <div class="easyui-panel" id="id_dd_cancle_authorization_index_BankCardDiv" style="height: 200px; width: 100%;" data-options="region:'center',border:false,title:'银行卡信息',iconCls:'icon-man'"> <table id="id_dd_cancle_authorization
easy-ui的data-options用法
weixin_30914981的博客
03-06 2363
页面代码部分： <thead><tr><th data-options="field:'a',width:60">停车时刻</th><th data-options="field:'nMin',width:50">时长</th><th data-options="field:'poi',width:80,"...
Jquery easyUI—datagrid数据表修改功能实现
07-08 497
一般表格都会要实现增删改查的功能，下面就来讲解easyUI中dadagrid数据表格的修改实现。 实现修改操作只能选择一行来修改，要选中一行，然后获取到一行的数据显示在修改的表单窗口中。 那么首先我们要考虑几个问题： _ 1. 如何获取到一行的数据 2.如何显示到修改窗口 3.后台代码如何编...
easyui 动态修改datagrid里面的属性,例如singleSelect:true改成false
xwc999
09-11 1714
问题复现 这样确实可以将singleSelect属性修改成false，但是datagrid会查询两次 $('#clientTable').datagrid({ singleSelect: false}） 解决方案 在初始化时如果直接定义一个值是会直接加载进入到内存中，这样后续也不好改它的属性。 可以使用数组的方式，内存中拿的是数组的地址值，可以修改改地址值里面元素的值。这样地址值不会改变，但是数组里面元素的值可以随意改。 这样就可以动态的修改数据表属性了 ...
easyui datagrid自定义按钮列,最后操作列
Lailai Monkey的博客
10-10 6414
目前小菜总结了两种方法： 一、datagrid绑定数据列是通过HTML设置好的 <table id="dg" title="用户管理" style="width: 700px;table-layout:fixed; height: 300px" data-options=" rownumbers:true, singleSelect:true,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值