jquery easyui datagrid简单使用学习

最新推荐文章于 2019-10-31 17:10:10 发布
最新推荐文章于 2019-10-31 17:10:10 发布
阅读量874 收藏 2
点赞数
分类专栏： jqeury 文章标签： jquery easyui datagrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qc1110/article/details/53925578
版权

先上效果图
这里写图片描述

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
    href="../js/themes/default/easyui.css"></link>
<link rel="stylesheet" type="text/css" href="../js/themes/icon.css"></link>
<link rel="stylesheet" type="text/css" href="../js/demo.css"></link>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
<script src="../html/common/js/common.js" type="text/javascript"></script>
<script src="../html/user/js/userManage.js" type="text/javascript"></script>
</head>
<body>
    <div id="tb">
        <!--查询条件-->
        <table>
            <tr>
                <td>
                    <p style="width: 60px" align="right">用户名:</p>
                </td>
                <td><input id="name" class="easyui-textbox" data-options=""
                    style="width: 100px"></input></td>
                <!-- 可做校验，使用data-options validType（可自定义校验规则，自带的校验规则较少）
                <tr>
                    <td>
                        <p style="width: 60px">用户名:</p>
                    </td>
                    <td><input id="name" class="easyui-textbox"
                        style="height: 25px"
                        data-options="required:true,validType:'username'"></td>
                </tr>
                -->
                <td>
                    <p style="width: 60px" align="right">姓名:</p>
                </td>
                <td><input id="realName" class="easyui-textbox" data-options=""
                    style="width: 100px"></input></td>
                <td>
                    <p style="width: 60px" align="right">状态:</p>
                </td>
                <td>
                    <select id="statusBox" class="easyui-combobox"
                    panelHeight="auto" style="width: 100px">
                    </select>
                </td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton"
                    iconCls="icon-search" onclick="queryData()">查询</a> 
                    <a href="javascript:void(0)" class="easyui-linkbutton"
                    iconCls="icon-reload" onclick="reset()">重置</a>
                </td>
            </tr>
        </table>
    </div>
    <!--datagrid，在js中初始化-->
    <table id="user_dg" class="easyui-datagrid"></table>
    <!--弹窗，在js中初始化-->
    <div id="win"></div>
</body>
</html>

js：

var operaType = "";

// 加载查询条件
$(function() {
    $.ajax({
        type : "GET",
        url : getRootPath() + "/common/initData?type=userManage",
        success : function(data) {
            // debugger;
            $('#statusBox').combobox({
                data : JSON.parse(data.userStatus),
                valueField : 'id',
                textField : 'text'
            });
            $('#belongBox').combobox({
                data : JSON.parse(data.userBelong),
                valueField : 'id',
                textField : 'text'
            });
        },
        error : function(err) {
            $.messager.alert('消息', '系统错误！', 'error');
        }
    });

})

// 加载datagrid
$(function() {
    $('#user_dg').datagrid({
    //工具栏
        toolbar : [ {
            iconCls : 'icon-add',
            text : "新增",
            width : 100,
            handler : function() {
                gotoAddUser();
            }
        }, '-', {
            iconCls : 'icon-edit',
            text : "编辑",
            width : 100,
            handler : function() {
                gotoEditUser();
            }
        }, '-', {
            iconCls : 'icon-cancel',
            text : "删除",
            width : 100,
            handler : function() {
                deleteUser();
            }
        }, '-', {
            iconCls : 'icon-lock',
            text : "锁定",
            width : 100,
            handler : function() {
                lockUser();
            }
        } ],
        width : 'auto',
        height : 'auto',
        pagination : true,
        pagePosition : 'bottom',
        fitColumns : true,
        //固定的参数列，参数列多的情况下不会随滚动条滚动
        frozenColumns : [ [ {
            field : 'ck',
            checkbox : true
        }, ] ],
        //普通的参数列
        columns : [ [ {
            field : 'userId',
            title : '用户ID',
            width : 100,
            align : 'center'
        }, {
            field : 'name',
            title : '用户名',
            width : 100,
            align : 'center'
        },{
            field : 'status',
            title : '状态',
            width : 100,
            align : 'center',
            //formatter 可处理datagrid显示值，value为当前的值，row为行对象（可获取行中的其他参
            //数）,index为行的序号
            formatter : function(value, row, index) {
                if (value == '01') {
                    return "锁定";
                } else if (value == '00') {
                    return "正常";
                }
            }
        }, {
            field : 'insertTime',
            title : '创建时间',
            width : 100,
            align : 'center',
            //日期转化，后台传入类型的为long
            formatter : function(value, row, index) {
                var unixTimestamp = new Date(value);
                return unixTimestamp.toLocaleString();
            }
        }, {
            field : 'updateTime',
            title : '修改时间',
            width : 100,
            align : 'center',
            formatter : function(value, row, index) {
                var unixTimestamp = new Date(value);
                return unixTimestamp.toLocaleString();
            }
        } ] ],
        //查询时访问后台的路径
        url : getRootPath() + "/user/query"
        //可设置默认查询的条件
//      queryParams : {
//          name : "haha",
//          status : $("#statusBox").combobox("getValue"),
//      },
    });
})

//查询方法，查询按钮调用
function queryData() {
    $('#user_dg').datagrid({
        queryParams : {
            name : $("#name").val(),
            status : $("#statusBox").combobox("getValue")
        },
    });
}
//新增界面（弹窗），在html中定义，这里设置具体参数
function gotoAddUser() {
    $('#win').window({
        width : 400,
        height : 600,
        modal : true,
        title : "新增",
    });
    operaType = 'add';
    $('#win').window('refresh', getRootPath() + '/common/page?url=user/userAdd');
}
//关闭弹窗
function closeWin() {
    $('#win').window('close');
    queryData();
}
var editRowId = "";
//修改弹窗
function gotoEditUser() {
    //获取被勾选的行
    var row = $('#user_dg').datagrid('getSelected');
    //判断是否有被选中的行
    if (row) {
        // alert('ID:'+row.userId)
        operaType = 'edit';
        editRowId = row.userId;
        $('#win').window({
            width : 400,
            height : 600,
            modal : true,
            title : "编辑"
        });
        $('#win').window('refresh', getRootPath() + '/common/page?url=user/userAdd');
    } else {
        $.messager.alert('消息', '未勾选待修改的用户！', 'info');
    }
}
//重置查询条件
function reset() {
    $("#name").textbox("setValue", "");
    $("#statusBox").combobox("setValue", "");
}

//删除操作
function deleteUser() {
    var rows = $('#dg').datagrid('getSelections');
    if (rows) {
        // debugger;
        $.messager.confirm('确认', '确定删除选中用户？', function(r) {
            if (r) {
                var userIds = "";
                for (var i = 0; i < rows.length; i++) {
                    userIds += rows[i].userId + " ";
                }
                $.ajax({
                    type : "POST",
                    url : getRootPath() + "/user/delete",
                    data : {
                        userIds : userIds,
                    },
                    success : function(data) {
                        if (data.result == "success") {
                            $.messager.alert('消息', '删除用户成功！', 'info');
                        }
                        if (data.result == "fail") {
                            $.messager.alert('消息', '删除用户失败！', 'error');
                        }
                        queryData();
                    },
                    error : function(err) {
                        $.messager.alert('消息', '删除用户失败！', 'error');
                    }
                });
            }
        });

    } else {
        $.messager.alert('消息', '未勾选待删除的用户！', 'info');
    }
}
function lockUser() {
    var rows = $('#dg').datagrid('getSelections');
    if (rows) {
        // debugger;
        $.messager.confirm('确认', '确定锁定选中用户？', function(r) {
            if (r) {
                var userIds = "";
                for (var i = 0; i < rows.length; i++) {
                    userIds += rows[i].userId + " ";
                }
                $.ajax({
                    type : "POST",
                    url : getRootPath() + "/user/lock",
                    data : {
                        userIds : userIds,
                    },
                    success : function(data) {
                        if (data.result == "success") {
                            $.messager.alert('消息', '锁定用户成功！', 'info');
                            queryData();
                        }
                        if (data.result == "fail") {
                            $.messager.alert('消息', '锁定用户失败！', 'error');
                        }
                    },
                    error : function(err) {
                        $.messager.alert('消息', '锁定用户失败！', 'error');
                    }
                });
            }
        });

    } else {
        $.messager.alert('消息', '未勾选待锁定的用户！', 'info');
    }
}

Ps:获取根目录和校验


function getRootPath() {// 获得根目录
    var strFullPath = window.document.location.href;
    var strPath = window.document.location.pathname;
    var pos = strFullPath.indexOf(strPath);
    var prePath = strFullPath.substring(0, pos);
    var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
    return (prePath + postPath);
}

/**
 * 自定义校验规则
 */
$(function() {
    $
            .extend(
                    $.fn.validatebox.defaults.rules,
                    {
                        idcard : {// 验证身份证
                            validator : function(value) {
                                return /^\d{15}(\d{2}[A-Za-z0-9])?$/i
                                        .test(value);
                            },
                            message : '身份证号码格式不正确'
                        },
                        minLength : {
                            validator : function(value, param) {
                                return value.length >= param[0];
                            },
                            message : '请输入至少（2）个字符.'
                        },
                        length : {
                            validator : function(value, param) {
                                var len = $.trim(value).length;
                                return len >= param[0] && len <= param[1];
                            },
                            message : "输入内容长度必须介于{0}和{1}之间."
                        },
                        phone : {// 验证电话号码
                            validator : function(value) {
                                return /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
                                        .test(value);
                            },
                            message : '格式不正确,请使用下面格式:020-88888888'
                        },
                        mobile : {// 验证手机号码
                            validator : function(value) {
                                return /^(13|15|18)\d{9}$/i.test(value);
                            },
                            message : '手机号码格式不正确'
                        },
                        intOrFloat : {// 验证整数或小数
                            validator : function(value) {
                                return /^\d+(\.\d+)?$/i.test(value);
                            },
                            message : '请输入数字，并确保格式正确'
                        },
                        currency : {// 验证货币
                            validator : function(value) {
                                return /^\d+(\.\d+)?$/i.test(value);
                            },
                            message : '货币格式不正确'
                        },
                        qq : {// 验证QQ,从10000开始
                            validator : function(value) {
                                return /^[1-9]\d{4,9}$/i.test(value);
                            },
                            message : 'QQ号码格式不正确'
                        },
                        integer : {// 验证整数 可正负数
                            validator : function(value) {
                                // return /^[+]?[1-9]+\d*$/i.test(value);

                                return /^([+]?[0-9])|([-]?[0-9])+\d*$/i
                                        .test(value);
                            },
                            message : '请输入整数'
                        },
                        age : {// 验证年龄
                            validator : function(value) {
                                return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i
                                        .test(value);
                            },
                            message : '年龄必须是0到120之间的整数'
                        },

                        chinese : {// 验证中文
                            validator : function(value) {
                                return /^[\Α-\￥]+$/i.test(value);
                            },
                            message : '请输入中文'
                        },
                        english : {// 验证英语
                            validator : function(value) {
                                return /^[A-Za-z]+$/i.test(value);
                            },
                            message : '请输入英文'
                        },
                        unnormal : {// 验证是否包含空格和非法字符
                            validator : function(value) {
                                return /.+/i.test(value);
                            },
                            message : '输入值不能为空和包含其他非法字符'
                        },
                        username : {// 验证用户名
                            validator : function(value) {
                                return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i
                                        .test(value);
                            },
                            message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
                        },
                        faxno : {// 验证传真
                            validator : function(value) {
                                // return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[
                                // ]){1,12})+$/i.test(value);
                                return /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
                                        .test(value);
                            },
                            message : '传真号码不正确'
                        },
                        zip : {// 验证邮政编码
                            validator : function(value) {
                                return /^[1-9]\d{5}$/i.test(value);
                            },
                            message : '邮政编码格式不正确'
                        },
                        ip : {// 验证IP地址
                            validator : function(value) {
                                return /d+.d+.d+.d+/i.test(value);
                            },
                            message : 'IP地址格式不正确'
                        },
                        name : {// 验证姓名，可以是中文或英文
                            validator : function(value) {
                                return /^[\Α-\￥]+$/i.test(value)
                                        | /^\w+[\w\s]+\w+$/i.test(value);
                            },
                            message : '请输入姓名'
                        },
                        date : {// 验证姓名，可以是中文或英文
                            validator : function(value) {
                                // 格式yyyy-MM-dd或yyyy-M-d
                                return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i
                                        .test(value);
                            },
                            message : '清输入合适的日期格式'
                        },
                        msn : {
                            validator : function(value) {
                                return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                                        .test(value);
                            },
                            message : '请输入有效的msn账号(例：abc@hotnail(msn/live).com)'
                        },
                        same : {
                            validator : function(value, param) {
                                if ($("#" + param[0]).val() != ""
                                        && value != "") {
                                    return $("#" + param[0]).val() == value;
                                } else {
                                    return true;
                                }
                            },
                            message : '两次输入的密码不一致！'
                        }
                    });

})

“`

Mc94Lee
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
datagrid初始化表格时不加载数据及分页设置无效的原因
chengsi101的博客
07-02 5380
页面在初始化加载数据较多时会非常耗时，如果只加载表格，用户再根据自己的需要通过条件查询数据，就会节约一些时间，提高用户体验，所以在初始化datagrid时想只加载表格不加载数据，做到数据与表格加载分离的效果。 经过实验发现，使用.datagrid（）方法时，参数中只要有URL存在，都会自动调用一次加载数据，可设置url参数为null，则加载表格时就不会向后台发出请求；但是此时如果用户想重置页面条
easyUI之datagrid（数据表格）使用
最新发布
03-18 863
‘">’,**在界面中添加数据表格添加相关依赖每个表都需要建立相应的js建立book.js将demo文件中的datagrid.data1.json复制到WebContent目录下book.js代码如下：/*** 注意：js文件中不支持el表达式*/columns:[[{field:‘productname’,title:‘名称’,width:100},{field:‘unitcost’,title:‘价格’,width:100,align:‘right’}]]});})
EasyUI入门，DataGrid（数据表格）
weixin_30823227的博客
06-21 153
搭建EasyUI 1.进入官网，下载EasyUI的程序包。地址：http://www.jeasyui.com/download/list.php 2.先导入css样式，引入程序包 3.进入EasyUI程序入门 <1>第一次发现分页是如此简便 js代码 $(function () { $('#dg').datagrid({...
Easy UI datagrid的学习
一只没有脚的鸟
11-10 1296
之前写了一篇博文，socket监控的。http://blog.csdn.net/tiantang_1986/article/details/40982113里面
JQuery DataGrid 中文文档
LEE_ZCF
04-05 4702
数据表格 继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。 依赖关系 控制面板缩放链接按钮分页 使用方法 table id="tt">table>   $('#tt').datagrid({       url:'datagrid_data.js
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
10-21
主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Jquery EasyUI Datagrid右键菜单实现方法
12-29
最近在学Jquery EasyUI，现在来说一说EasyUI的DataGrid，一般当我们在实现前端界面的时候，经常在DataGrid的上面或者后面加一些按钮，方便用户进行一些添加，删除，编辑等功能 用户在每次使用的时候，都需要去先...
jquery easyui DataGrid简单示例
10-20
本篇文章主要介绍了jquery easyui DataGrid简单示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery easyUI datagrid 增加求和统计行的实现代码
12-28
在datagrid的onLoadSuccess事件增加代码处理。 <style type=text/css> .subtotal { font-weight: bold; }/*合计单元格样式*/ </style> [removed] function onLoadSuccess() { //添加“合计”列 $...
jQuery EasyUI datagrid实现本地分页的方法
01-19
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
EasyUI DataGrid使用示例
diehe5608的博客
11-05 408
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUIDemo.aspx.cs" Inherits="C_EasyUIDemo" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea...
jquery-easyUi datagrid 基本用法
sd6275832ght的博客
10-22 1984
首先引入相应的css 和jq 脚本 &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;link href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;css/themes/default/easyui.css&amp;amp;amp;amp;amp;amp;amp;amp;quot; rel=&amp;amp;amp;amp;amp;amp;amp;amp;quot;stylesheet&amp;amp
datagrid的简单应用：
CSDN19970806的博客
07-17 604
datagrid是数据表格的意思，可以将我们后台返回来的数据进行一一放入表格中相应的地方。 这里的有分页功能，等下一期出datagrid的分页查询。   首先，如果要应用datagrid 的话，有两种方式，一种是写在HTML中，另外一种是写在js中的，可以根据自己的需求，如果业务比较多的情况下，建议使用js的方式去写，name具体看一下如何使用吧。 首先，记得将easyui的包放到你的...
jquery datagrid 的一些用法
10-15 681
1 隐藏打印和导出pdf按钮 $(".iaf-icon-print").parent().parent().parent().hide(); $(".iaf-icon-pdf").parent().parent().parent().hide(); 2 对导引导出按钮进行方法重写(js) /**  *  自定义导出控件  *  1. 覆盖iaf标签库自带的导出方法  *  2. 修复
easyUI快速入门第五讲——easyUI中的datagrid（数据表格）组件
李阿昀的博客
10-31 2155
datagrid（数据表格）组件的概述 datagrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。datagrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富，单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 datagrid（数据表格）组件的使用 。。。 ...
EasyUi Datagrid的基础使用
hongweideng的专栏
12-15 1189
Datagride的初始化方式 方式1 ：class类型创建，这个创建方式比较简单，如果在已知表格内容的情况下可以使用，还是挺漂亮的 [html] view plaincopy table class="easyui-datagrid">         thead>             tr>                 th 
Spring Boot 系列教程7-EasyUI-datagrid
菜鸟教程
11-27 481
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 案例使用EasyUI插件 datagrid：向用户展示列表数据。 dial...
jQuery-easyUI的使用：datagrid实现可编辑表格
熊诗言的博客
10-30 1万+
无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte...
EasyUI之datagrid展示数据列表
热门推荐
张翠山的博客
05-04 4万+
写在最前： 如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统，第一次接触到EasyUI的时候，往往会有一个大大的疑问，这EasyUI是如何做跳转的啊？增删改查都不知道如何下手了！但是当你知道有RestFul编程的时候。你会恍然大悟：我靠，RestFul+EasyUI简直就是绝配呀！博主就是如此：在写完一个增删改查之后，才发现EasyUI越学越有意思，页面都是靠局部刷新来动态展示数据，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值