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框架系列（一）~谈谈我在实际业务中的增删改查
想想毕业已经快一年了,也就是大约两年以前,怀着满腔的热血正式跨入程序员的世界,那时候的自己想象着所热爱的技术生涯会是多么的丰富多彩,每天可以与大佬们坐在一起讨论解决各种牛逼的技术问题,喝着咖啡,翘着二 ...
随机推荐
- 『追捕盗贼 Tarjan算法』
追捕盗贼(COCI2007) Description 为了帮助警察抓住在逃的罪犯,你发明了一个新的计算机系统.警察控制的区域有N个城市,城市之间有E条双向边连接,城市编号为1到N. 警察经常想在罪犯从 ...
- 翻译 Asp.Net Core 2.2.0-preview1已经发布
Asp.Net Core 2.2.0-preview1已经发布 原文地址 ASP.NET Core 2.2.0-preview1 now available 今天我们很高兴地宣布,现在可以试用ASP. ...
- RabbitMQ消息队列（三）-Centos7下安装RabbitMQ3.6.1
如果你看过前两章对RabbitMQ已经有了一定了解,现在已经摩拳擦掌,来吧动手吧! 用什么系统 本文使用的是Centos7,为了保证对linux不太熟悉的伙伴也能轻松上手(避免折在安装的路上),下面是 ...
- 【Java基础】【09面向对象_多态&抽象类&接口】
09.01_面向对象(多态的概述及其代码体现) A:多态(polymorphic)概述 事物存在的多种形态 B:多态前提 a:要有继承关系. b:要有方法重写. c:要有父类引用指向子类对象. C:案 ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->用户管理模块新增“重置用户密码”功能
不管是什么系统登录用户都有忘记密码的时候,忘记密码就进入不了系统.系统应该可以提供重置用户密码的功能.在我们框架中重置用户密码功能一般用用户管理员来完成.当然如果做得复杂点还可以由用户自己来重置(如: ...
- Java线程Thread的状态解析以及状态转换分析 多线程中篇（七）
线程与操作系统中线程(进程)的概念同根同源,尽管千差万别. 操作系统中有状态以及状态的切换,Java线程中照样也有. State 在Thread类中有内部类 枚举State,用于抽象描述Java线程的 ...
- Python迭代和解析(1)：列表解析
解析.迭代和生成系列文章:https://www.cnblogs.com/f-ck-need-u/p/9832640.html Python中的解析 Python支持各种解析(comprehensio ...
- 使用EMQ搭建MQTT服务器
前言寒假的时候开始搭建mqtt服务器,一开始使用的是RabbitMQ,基于Erlang语言.但是RabbitMQ的本职工作是AMQP,MQTT只是他的一个插件功能,似乎有些大材小用,很多MQTT的功能 ...
- ado.net的简单数据库操作（一）
摘要:接下来的几篇博客将要讲到如何使用ado.net实现简单的数据库操作,包括增删改等内容.首先会介绍基础的数据库操作,然后以一个实例来进行讲解,这个实例会把一个数据表读取到winform上,然后在w ...
- Android开发过程中的坑及解决方法收录（四）
1.某个控件要放在Linearlayout布局的底部(底部导航条) <LinearLayout xmlns:android="http://schemas.android.com/ap ...