topjui中datagrid增删改查

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增删改查的更多相关文章

【设计模式】【应用】使用模板方法设计模式、策略模式处理DAO中的增删改查
原文:使用模板方法设计模式.策略模式处理DAO中的增删改查关于模板模式和策略模式参考前面的文章. 分析在dao中,我们经常要做增删改查操作,如果每个对每个业务对象的操作都写一遍,代码量非常庞大. ...
Node.js、express、mongodb 入门(基于easyui datagrid增删改查)
前言从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...
easyui datagrid 增删改查示例
查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...
详谈easyui datagrid增删改查操作
转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...
winform窗体（六）——DataGridView控件及通过此控件中实现增删改查
DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查一.后台数据绑定: List<xxx> list = new List<xxx> ...
Winform(DataGridView)控件及通过此控件中实现增删改查
DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查一.后台数据绑定: List<xxx> list = new List<xxx> ...
DataGridView中进行增删改查
首先我们需要知道是在哪个数据库中的哪个表进行增删改查: 这就需要我们: 建立给连接服务器的类:(可以在方法类中建立) 建立一个对列名进行封装的类:方便数据之间的传接:(学到Linq-sql时这些就简便 ...
SQLite中的增删改查
虽然android提供了sql查询的封装方法,但是理解起来还是麻烦,所以我这里用sql语句来完成工作. 首先是建立一个类,继承SQLiteOpenHelper 这里面会建立一个数据库,并且初始化一个表 ...
“造轮运动”之 ORM框架系列（一）~谈谈我在实际业务中的增删改查
想想毕业已经快一年了,也就是大约两年以前,怀着满腔的热血正式跨入程序员的世界,那时候的自己想象着所热爱的技术生涯会是多么的丰富多彩,每天可以与大佬们坐在一起讨论解决各种牛逼的技术问题,喝着咖啡,翘着二 ...

随机推荐

c 编译器大全
c 编译器大全看了下nginx的auto/cc下的目录,nginx对多种c语言的编辑器都进行了支持.才知道c语言有那么多编辑器. 编译器原理所谓编译器,就是执行下面的三步骤: 1 将目标语言转换为 ...
【Git】（2）---checkout、branch、log、diff、.gitignore
常用命令一.命令 1.checkout 切换分支 git checkout 分支名 #切换分支 #如果在当前分支上对文件进行修改之后,没有commit就切换到另外一个分支b, 这个时候会报错,因为没 ...
Python：正则表达式 re 模块
正则是处理字符串最常用的方法,我们编码中到处可见正则的身影. 正则大同小异,python 中的正则跟其他语言相比略有差异: 1.替换字符串时,替换的字符串可以是一个函数 2.split 函数可以指定分 ...
JDBC 连接池的两种方式——dbcp & c3p0
申明:本文对于连接资源关闭采用自定义的 JDBCUtils 工具: package com.test.utils; import java.sql.Connection; import java.sq ...
图数据库项目DGraph的前世今生
本文由云+社区发表作者:ManishRai Jain 作者:ManishRai Jain Dgraph Labs创始人版权声明:本文由腾讯云数据库产品团队整理,页面原始内容来自于db weekly ...
大前端的自动化工厂（5）—— 基于Karma+Mocha+Chai的单元测试和接口测试
一. 前端自动化测试大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了"人肉测试机",完全没必要自己来.但随着项目体量的增大,许多 ...
[转]快速新建简单的koa2后端服务
本文转自:https://blog.csdn.net/saucxs/article/details/83788259 既然前端工程化是基于NodeJS,那么选择NodeJs做前后端分离部署也是理所应当 ...
第一册：lesson 103.
原文:The French text. How was the exam, Richard? Not too bad. I think I passed in English and Mathemat ...
python学习笔记(七)、异常
在实际开发中,往往不会出现一个系统编写下来,没有出现任何一个bug.为处理这种会出现错误的地方,如除数为零的除法,python提供了非常强大的机制————异常处理机制. 1 异常 python使用异常 ...
Maven（十五）Maven 聚合
聚合解决的问题: 解决每个模块之间都要一个一个安装,一键安装各个模块工程尤其时在配置继承后要先安装子模块在安装父,模块. 配置方式自己找一个工程作为聚合工程,配置好后在聚合工程上运行Maven i ...

topjui中datagrid增删改查

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

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

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

随机推荐

热门专题