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框架系列（一）~谈谈我在实际业务中的增删改查
想想毕业已经快一年了,也就是大约两年以前,怀着满腔的热血正式跨入程序员的世界,那时候的自己想象着所热爱的技术生涯会是多么的丰富多彩,每天可以与大佬们坐在一起讨论解决各种牛逼的技术问题,喝着咖啡,翘着二 ...

随机推荐

Session知识点
知识点概要 - Session - CSRF - Model操作 - Form验证(ModelForm) - 中间件 - 缓存 - 信号内容详细: 1. S ...
使用reflector对.NET反编译
reflector的下载地址:https://www.cr173.com/soft/355285.html 反编译后的结果:
TDX指标的理解与改造（价格到达指标线提醒）
目的:画线指标理解,并同时改造成条件选股指标. 参考:https://mp.csdn.net/postedit/83176406 #ff7700 hex color https://www.colo ...
@@ITENTITY
@@identity是表示的是最近一次向具有identity属性(即自增列)的表插入数据时对应的自增列的值,是系统定义的全局变量.一般系统定义的全局变量都是以@@开头,用户自定义变量以@开头.sele ...
带着萌新看springboot源码13（手写一个自己的starter）
springboot的最强大的就是那些xxxAutoconfiguration,但是这些xxxAutoConfiguration又依赖那些starter,只有导入了这些场景启动器(starter),我 ...
Python：数据可视化pyecharts的使用
什么是pyecharts? pyecharts 是一个用于生成 Echarts 图表的类库. echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生 ...
Android 发送多个不同的快捷方式（shortcut）到桌面并向其启动的Activity传参
需求: 对于创建快捷方式到桌面,网上能查到不少资料,但一般都是针对应用程序本身的. 前阵子在做项目时,遇到了一个类似于百度贴吧里面的一个需求:对于每个具体的贴吧,都可以将其发送到桌面(HomeScre ...
AppBoxFuture(三): 分而治之
系统数据量达到一定程度后必将采用分库分表的方式来提高系统性能,但传统的分库分表方式也必将带来更高的开发复杂程度.新一代的NewSql及NoSql数据库由于天生的分布式存储基因,既保证了能够横向扩展 ...
痞子衡嵌入式：通用NOR接口标准(CFI-JESD68)及SLC Parallel NOR简介
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是CFI标准及SLC Parallel NOR. NOR Flash是嵌入式世界里最常见的存储器,常常内嵌在微控制器里(Parallel型 ...
.Net语言 APP开发平台——Smobiler学习日志：如何设置页面的title
1.修改Mobile Form的TitleText的属性输入需要显示标题,如图1: 2.修改Mobile Form的TitleStyle属性其中包括Image属性(窗体图标).BackColor属 ...

topjui中datagrid增删改查

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

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

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

随机推荐

热门专题