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框架系列（一）~谈谈我在实际业务中的增删改查
想想毕业已经快一年了,也就是大约两年以前,怀着满腔的热血正式跨入程序员的世界,那时候的自己想象着所热爱的技术生涯会是多么的丰富多彩,每天可以与大佬们坐在一起讨论解决各种牛逼的技术问题,喝着咖啡,翘着二 ...
随机推荐
- 查找占用资源高的JAVA代码
1. /tmp/hsperfdata_$USER目录 $USER是启动JAVA进程的用户,这里保存的所有用户启动的JAVA进程. 这些都JAVA进程的PID,里面存放的是JVM进程信息.你所用的jsp ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- HBase BulkLoad批量写入数据实战
1.概述 在进行数据传输中,批量加载数据到HBase集群有多种方式,比如通过HBase API进行批量写入数据.使用Sqoop工具批量导数到HBase集群.使用MapReduce批量导入等.这些方式, ...
- [ SSH框架 ] Spring框架学习之一
一.Spring概述 1.1 什么是Spring Spring是一个开源框架, Spring是于2003年兴起的一个轻量级的Java开发框架,由 Rod Johnson在其著作 Expert One- ...
- springboot2.0.3源码篇 - 自动配置的实现，发现也不是那么复杂
前言 开心一刻 女儿: “妈妈,你这么漂亮,当年怎么嫁给了爸爸呢?” 妈妈: “当年你爸不是穷嘛!‘ 女儿: “穷你还嫁给他!” 妈妈: “那时候刚刚毕业参加工作,领导对我说,他是我的扶贫对象,我年轻 ...
- CSS float的相关图文详解（一）
大家好,作为一个刚入门的小前端,第一次写博客,很是鸡冻.由于涉猎较浅,有些知识可能说的不清楚,或者有什么错误,欢迎留言指正.我的第一篇博客写的关于css的浮动的.想必很多小伙伴特别是刚学的,对浮动有一 ...
- Perl IO：read()函数
read()函数 read()函数用于从文件句柄中读取指定字节数的数据并写入到一个标量中.如果文件句柄是以Unicode方式打开的,则表示读取指定字符数而非字节数. 有两种read方式: read F ...
- c# Task 篇幅二
上面一篇https://i.cnblogs.com/EditPosts.aspx?postid=10444773我们介绍了Task的启动,Task的一些方法以及应用,今天我们着重介绍一下Task其它概 ...
- Web工作方式：浏览网页的时候发生了什么？
原文地址:https://wizardforcel.gitbooks.io/build-web-application-with-golang/content/03.1.html 我们平时浏览网页的时 ...
- Mysql语句中当前时间不能直接使用C#中的Date.Now传输
MySql中处理字符串时间,会默认把第一个数字当成年份处理. 在C#服务器中,使用Date.Now.ToString()生成的字符串时间,如果不指定字符串格式,C#会按照系统语言输出不同的字符串格式, ...