1.掌握datagrid的创建方式在html中直接定义与在js中定义

可参考easyui的官方文档：http://www.jeasyui.net/plugins/183.html

2.实现代码如下：重点掌握数据域的属性，事件，列的属性，事件

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- 避免IE使用兼容模式 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

    <meta name="renderer" content="webkit">

    <!-- TopJUI框架样式 -->

    <link type="text/css" href="../UIFrame/topjui/css/topjui.core.min.css" rel="stylesheet">

    <link type="text/css" href="../UIFrame/topjui/themes/default/topjui.bluelight.css" rel="stylesheet" id="dynamicTheme"/>

    <!-- FontAwesome字体图标 -->

    <link type="text/css" href="../UIFrame/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>

    <!-- layui框架样式 -->

    <link type="text/css" href="../UIFrame/static/plugins/layui/css/layui.css" rel="stylesheet"/>

    <!-- jQuery相关引用 -->

    <script type="text/javascript" src="../UIFrame/static/plugins/jquery/jquery.min.js"></script>

    <script type="text/javascript" src="../UIFrame/static/plugins/jquery/jquery.cookie.js"></script>

    <!-- TopJUI框架配置 -->

    <script type="text/javascript" src="../UIFrame/static/public/js/topjui.config.js"></script>

    <!-- TopJUI框架核心-->

    <script type="text/javascript" src="../UIFrame/topjui/js/topjui.core.min.js"></script>

    <!-- TopJUI中文支持 -->

    <script type="text/javascript" src="../UIFrame/topjui/js/locale/topjui.lang.zh_CN.js"></script>

    <!-- layui框架js -->

    <script type="text/javascript" src="../UIFrame/static/plugins/layui/layui.js" charset="utf-8"></script>

    <!-- test功能模块对应的js，存放与根目录JS下 -->

    <script type="text/javascript" src="../js/test.js" charset="utf-8"></script>

</head>

<body>

<!-- 所有与此ID相关的DGrid进行替换，以模块名称进行相应的命名 -->

<table id="testDg"></table>

<!-- 表格工具栏开始 -->

<div id="testDg-toolbar" class="topjui-toolbar"

     data-options="grid:{

           type:'datagrid',

           id:'testDg'

       }">

    <a id="add" href="javascript:void(0)">添加数据</a>

    <a id="edit" href="javascript:void(0)">修改数据</a>

    <a id="delete" href="javascript:void(0)">删除数据</a>

    <a id="search" href="javascript:void(0)">综合查询</a>

    <a id="import" href="javascript:void(0)">数据导入</a>

    <a id="export" href="javascript:void(0)">数据导出</a>

    <a id="analyse" href="javascript:void(0)">统计分析</a>

    <a id="report" href="javascript:void(0)">报表打印</a>

    <form id="queryForm" class="search-box">

        <input type="text" name="username" data-toggle="topjui-textbox"

               data-options="id:'username',prompt:'用户名',width:100">

        <a id="queryBtn" href="javascript:void(0)">查询</a>

    </form>

</div>

<!-- 表格工具栏结束 -->

<!-- 表格行编辑窗口 -->

<form id="editDialog"></form>

<input type="hidden" name="sss" id="sss" data-toggle="topjui-textbox">

</body>

</html>
/**

 * 单元格内容以进度条进行格式化显示

 */

function progressFormatter(value, rowData, rowIndex) {

        var htmlstr = '<div id="p" class="topjui-progressbar progressbar" data-options="value:' + value + '" style="width: 398px; height: 26px;">';

    htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';

    htmlstr += '<div class="progressbar-value" style="width: ' + value + '%; height: 26px; line-height: 26px;">';

    htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';

    htmlstr += '</div>';

    htmlstr += '</div>';

    return htmlstr;

}

/**

 * 单元格内容进行格式化操作

 */

function operateFormatter(value, row, index) {

    var htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditDiag(\'' + row.uuid + '\')">编辑</button>';

    htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRow(\'' + row.uuid + '\')">删除</button>';

    return htmlstr;

}

/**

 * 以主键进行数据修改操作

 */

function openEditDiag(uuid) {

    //创建form表单

    var $editDialog = $('<form></form>'); // $('#editDialog')用这个查找不能二次打开

    $editDialog.iDialog({

        title: '修改数据示例A',

        width: 950,

        height: 500,

        closed: false,

        cache: false,

        collapsible: 0,

        resizable : 0,        //定义是否可以调整对话框的大小

        iconCls: 'fa fa-pencil',

        maximizable : 0,

        href: 'indexDatail.html'    ,//数据回显

        modal: true,    //设置为模式窗口，窗口外的其他元素不能够点击

        buttons: [{

            text: '保存',

            iconCls: 'fa fa-save',

            btnCls: 'topjui-btn-blue',

            handler: function () { //保存按键AJAX处理

                var formData = $editDialog.serializeArray();    //进行序列化操作，返回json数组

                jQuery.ajax({

                    type: 'POST',    //请求方式

                    url:"indexHandle.jsp?flags=update",

                    dataType: "json",    //预期服务器返回的数据类型

                    contentType: "application/x-www-form-urlencoded;charset=UTF-8",    //返回给服务器时候的字符编码

                    data: formData,    //发送到服务器上的数据

                    success: function (data) {

                        showMessage(data);

                        if (data.statusCode == 200){    //修改成功的状态码为200

                            $editDialog.iDialog('close');    //关闭对话框

                            $('#testDg').iDatagrid('reload');    //数据表格重新加载一遍

                        }

                    },

                    error: function (data) {

                    }

                });

            }

        }, {

            text: '关闭',

            iconCls: 'fa fa-close',

            btnCls: 'topjui-btn-red',

            handler: function () {

                $editDialog.iDialog('close');

            }

        }],

        onLoad: function () {    //在dialog给文本框打开的时候给文本框赋值

            //加载表单数据

            $.getJSON('indexHandle.jsp?flags=detail&uuid=' + uuid, function (data) {

                $editDialog.form('load', data);

            });

        }

    });

}

/**

 * 以主键方式对数据进行删除操作

 */

function deleteRow(uuid) {

    $.iMessager.confirm('操作提示', '所选择的数据一经删除将不可恢复，是否确认进行此操作？', function(r) {

        if(r){

            //异步提交删除数据

            $.ajax({

                type: 'POST',

                url:"indexHandle.jsp?flags=delete",

                dataType: "json",

                contentType: "application/x-www-form-urlencoded;charset=UTF-8",

                data: {"uuid":uuid}, //构建主键

                success: function (data) {

                    showMessage(data);

                    if (data.statusCode == 200){ //操作成功重载数据

                        $('#testDg').iDatagrid('reload');

                    }

                },

                error: function (data) {//错误处理

                }

            });

        }

    });

}

$(function () {

    var testDg = {

        type: 'datagrid',

        id: 'testDg'

    };

    $("#testDg").iDatagrid({

        selectOnCheck:true, 
　　　　　checkOnSelect:true,

        nowrap: true,

        queryParams: { 'ss': ''},// $("#ss").textbox('getValue') },

        url: 'indexHandle.jsp?flags=query',    //所需要加载的数据列表

        columns: [[

            {field: 'uuid', title: 'UUID', checkbox: true},

            {field: 'username', title: '用户名', sortable: true, width:100},

            {field: 'password', title: '用户密码', sortable: true, width:100},

            {field: 'sex', title: '性别', sortable: false, width:100, align:'center'},

            {field: 'age', title: '年龄', sortable: false, width:100, align:'right'},

            {field: 'education', title: '学历', sortable: true, width:100},

            {field: 'address', title: '地址', sortable: false, width:200},

            {field: 'handle', title: '操作', sortable: false, formatter: operateFormatter, width:100, align:'center'}

        ]],

        filter: [{

            field: 'username',

            type: 'textbox',

            op: ['contains', 'equal', 'notequal', 'less', 'greater']//过滤操作

        }, {

            field: 'sex',

            type: 'combobox',

            options: {

                valueField: 'label',

                textField: 'value',

                data: [{

                    label: '男',

                    value: '男'

                }, {

                    label: '女',

                    value: '女'

                }]

            },

            op: ['contains', 'equal', 'notequal']

        }, {

            field: 'age',

            type: 'textbox',

            op: ['equal', 'less', 'greater']

        }],

        onBeforeLoad: function (param) {

            param.ss = $("#sss").textbox('getText');

        },

        onLoadSuccess:function(data){

            $("#sss").textbox("setValue", $.cookie('_SQLSTRING'));

        }

    });

    $("#add").iMenubutton({

        method: 'openDialog',

        extend: '#testDg-toolbar',        //继承按钮

        iconCls: 'fa fa-file-text-o',    //按钮图标

        btnCls: 'topjui-btn-brown',        //按钮样式

        width: 90,

        dialog: {

            id: 'userAddDialog',

            iconCls: 'fa fa-file-text-o',

            title: '添加数据示例',

            href: 'indexDatail.html',

            collapsible: 0,        //定义是否可以折叠

            resizable : 0,        //定义对话框是否可以调整大小

            maximizable : 0,    //定义是否显示最大化按钮

            buttonsGroup: [        //按钮组

                {

                    text: '添加',

                    url: 'indexHandle.jsp?flags=add',

                    iconCls: 'fa fa-file-text-o',

                    handler: 'ajaxForm',

                    btnCls: 'topjui-btn-brown'

                }

            ]

        }

    });

    $("#edit").iMenubutton({

        method: 'openDialog',

        extend: '#testDg-toolbar',

        iconCls: 'fa fa-pencil',

        btnCls: 'topjui-btn-green',

        width: 90,

        grid: testDg,

        dialog: {

            title: '修改数据示例',

            iconCls: 'fa fa-pencil',

            href: 'indexDatail.html',

            url: 'indexHandle.jsp?flags=detail&uuid={uuid}',    //数据回显

            collapsible: 0,

            resizable : 0,

            maximizable : 0,

            buttonsGroup: [

                {

                    text: '修改',

                    url: 'indexHandle.jsp?flags=update',

                    iconCls: 'fa fa-pencil',

                    handler: 'ajaxForm',

                    btnCls: 'topjui-btn-green'

                }

            ]

        }

    });

    $("#delete").iMenubutton({

        method: 'doAjax',

        extend: '#testDg-toolbar',

        iconCls: 'fa fa-trash',

        btnCls: 'topjui-btn-red',

        width: 90,

        confirmMsg: '所选择的数据一经删除将不可恢复，是否确认进行此操作？',//提示信息

        grid: {

            type: 'datagrid',

            id: 'testDg',

            uncheckedMsg: '请先选择要删除的数据后进行此操作！',

            param: 'uuid:uuid'

        },

        url: 'indexHandle.jsp?flags=delete'

    });

    $("#search").iMenubutton({

        method: 'search',

        extend: '#testDg-toolbar',

        btnCls: 'topjui-btn-blue',

        width: 90,

        grid: testDg

    });

    $("#import").iMenubutton({

        method: 'openDialog',

        extend: '#testDg-toolbar',

        iconCls: 'fa fa-cloud-upload',

        btnCls: 'topjui-btn-purple',

        width: 90,

        grid: testDg,

        dialog: {

            title: '数据导入',

            href: '../common/import.html',

            height:600,

            collapsible: 0,

            iconCls: 'fa fa-cloud-upload',

            resizable : 0,

            maximizable : 0,

            buttonsGroup: [

                {

                    id: 'btnImport',

                    text: '数据导入',

                    disabled: 1,

                    url: 'indexHandle.jsp?flags=import',

                    iconCls: 'fa fa-cloud-upload',

                    handler: 'ajaxForm',

                    btnCls: 'topjui-btn-purple'

                }

            ]

        }

    });

    $("#export").iMenubutton({

        method: 'export',

        extend: '#testDg-toolbar',

        btnCls: 'topjui-btn-purple',

        width: 90,

        grid: {

            type: 'datagrid',

            id: 'testDg',

        },

        url: 'indexHandle.jsp?flags=export'

    });

    $("#analyse").iMenubutton({

        extend: '#testDg-toolbar',

        btnCls: 'topjui-btn-black',

        iconCls: 'fa fa-bar-chart',

        width: 90,

        onClick: analyseShow

    });

    $("#report").iMenubutton({

        extend: '#testDg-toolbar',

        btnCls: 'topjui-btn-black',

        iconCls: 'fa fa-file-word-o',

        width: 90,

        onClick: function () {

            jQuery.ajax({

                type: 'POST',

                cache : false,

                dataType : "json",

                async : false,

                url:"indexHandle.jsp?flags=report",

                success: function (data) {

                    showMessage(data);

                },

                error: function (data) {

                }

            });

        }

    });

    $('#queryBtn').iMenubutton({

        method: 'query',

        iconCls: 'fa fa-search',

        btnCls: 'topjui-btn-blue',

        form: {id: 'queryForm'},

        grid: {type: 'datagrid', 'id': 'testDg'}

    });

});

// 自定义统计分析

function analyseShow() {

    var $editDialog = $('<form></form>'); // $('#editDialog')用这个查找不能二次打开

    $editDialog.iDialog({

        title: '统计分析示例',

        width: 800,

        height: 550,

        closed: false,

        cache: false,

        iconCls: 'fa fa-bar-chart',

        collapsible: 0,

        resizable : 0,

        maximizable : 1,

        href:'line.html',//href: 'indexHandle.jsp?flags=report&ss=' +  $("#sss").textbox('getText'),//获取查询数据

        modal: true,

        buttons: [{

            text: '关闭',

            iconCls: 'fa fa-close',

            btnCls: 'topjui-btn-red',

            handler: function () {

                $editDialog.iDialog('close');

            }

        }]

    });

}

//自定义报表打印

function reportShow() {

    var $editDialog = $('<form></form>'); // $('#editDialog')用这个查找不能二次打开

 $editDialog.iDialog({

     title: '报表打印示例',

     iconCls: 'fa fa-file-word-o',

     collapsible: 0,

     resizable : 0,

     maximizable : 1,

     href:'indexHandle.jsp?flags=report',//href: 'indexHandle.jsp?flags=report&ss=' +  $("#sss").textbox('getText'),//获取查询数据

     modal: true,

     buttons: [{

         text: '关闭',

         iconCls: 'fa fa-close',

         btnCls: 'topjui-btn-red',

         handler: function () {

             $editDialog.iDialog('close');

         }

     }]

 });

}

topjui中datagrid增删改查的更多相关文章

  1. 【设计模式】【应用】使用模板方法设计模式、策略模式 处理DAO中的增删改查

    原文:使用模板方法设计模式.策略模式 处理DAO中的增删改查 关于模板模式和策略模式参考前面的文章. 分析 在dao中,我们经常要做增删改查操作,如果每个对每个业务对象的操作都写一遍,代码量非常庞大. ...

  2. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)

    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...

  3. easyui datagrid 增删改查示例

    查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...

  4. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  5. winform窗体（六）——DataGridView控件及通过此控件中实现增删改查

    DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查 一.后台数据绑定:    List<xxx> list = new List<xxx> ...

  6. Winform(DataGridView)控件及通过此控件中实现增删改查

    DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查 一.后台数据绑定:    List<xxx> list = new List<xxx> ...

  7. DataGridView中进行增删改查

    首先我们需要知道是在哪个数据库中的哪个表进行增删改查: 这就需要我们: 建立给连接服务器的类:(可以在方法类中建立) 建立一个对列名进行封装的类:方便数据之间的传接:(学到Linq-sql时这些就简便 ...

  8. SQLite中的增删改查

    虽然android提供了sql查询的封装方法,但是理解起来还是麻烦,所以我这里用sql语句来完成工作. 首先是建立一个类,继承SQLiteOpenHelper 这里面会建立一个数据库,并且初始化一个表 ...

  9. “造轮运动”之 ORM框架系列（一）~谈谈我在实际业务中的增删改查

    想想毕业已经快一年了,也就是大约两年以前,怀着满腔的热血正式跨入程序员的世界,那时候的自己想象着所热爱的技术生涯会是多么的丰富多彩,每天可以与大佬们坐在一起讨论解决各种牛逼的技术问题,喝着咖啡,翘着二 ...

随机推荐

  1. Solaris 11 配置IP地址

    查看ipipadm show-addr 删除IP地址ipadm delete-addr net0/v4 配置IP地址ipadm create-addr –T static –a local=10.90 ...

  2. 『Tarjan算法 有向图的强连通分量』

    有向图的强连通分量 定义:在有向图\(G\)中,如果两个顶点\(v_i,v_j\)间\((v_i>v_j)\)有一条从\(v_i\)到\(v_j\)的有向路径,同时还有一条从\(v_j\)到\( ...

  3. 深度学习（九） 深度学习最全优化方法总结比较（SGD，Momentum，Nesterov Momentum，Adagrad，Adadelta，RMSprop，Adam）

    前言 这里讨论的优化问题指的是,给定目标函数f(x),我们需要找到一组参数x(权重),使得f(x)的值最小. 本文以下内容假设读者已经了解机器学习基本知识,和梯度下降的原理. SGD SGD指stoc ...

  4. Vim 下的复制/粘贴/剪切/撤销

    一 了解 vim 有 12 个粘贴板,分别是 0.1.2.....9.a.“.+:用 :reg 命令可以查看各个粘贴板里的内容.在 vim 中简单用 y 命令只是复制到 "(双引号)粘贴板里 ...

  5. leetcode — sum-root-to-leaf-numbers

    import java.util.Stack; /** * * Source : https://oj.leetcode.com/problems/sum-root-to-leaf-numbers/ ...

  6. Java开发知识之Java字符串类

    Java开发知识之Java字符串类 一丶简介 任何语言中.字符串都是很重要的.都涉及到字符串的处理. 例如C++中. 字符串使用内存. 并提供相应的函数进行处理 strcmp strcat strcp ...

  7. PE知识复习之PE的导入表

    PE知识复习之PE的导入表 一丶简介 上一讲讲解了导出表. 也就是一个PE文件给别人使用的时候.导出的函数  函数的地址 函数名称 序号 等等. 一个进程是一组PE文件构成的.  PE文件需要依赖那些 ...

  8. Swing——简单的计算器

    前言 这是博主学习完Swing后,使用Swing实现的一个简单计算器.做简单的计算器的目的是将最近所学的Swing给应用起来,写博文介绍的目的是记录做这个计算器的思路.下面将分为界面和事件两部分介绍. ...

  9. js转base64（数字）

    var name='测试文字'; var t_name=encodeURIComponent(name); t_name=window.btoa(t_name); console.log(t_name ...

  10. C#的多样性，new，sealed方法

    class A{ public virtual void Display(){Console.WriteLine("A");} } class B:A{ public new vo ...