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

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

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

<!DOCTYPE html>
<html>
<head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><!--避免IE使用兼容模式--><metahttp-equiv="X-UA-Compatible"content="IE=edge, chrome=1"><metaname="renderer"content="webkit"><!--TopJUI框架样式--><linktype="text/css"href="../UIFrame/topjui/css/topjui.core.min.css"rel="stylesheet"><linktype="text/css"href="../UIFrame/topjui/themes/default/topjui.bluelight.css"rel="stylesheet"id="dynamicTheme"/><!--FontAwesome字体图标--><linktype="text/css"href="../UIFrame/static/plugins/font-awesome/css/font-awesome.min.css"rel="stylesheet"/><!--layui框架样式--><linktype="text/css"href="../UIFrame/static/plugins/layui/css/layui.css"rel="stylesheet"/><!--jQuery相关引用--><scripttype="text/javascript"src="../UIFrame/static/plugins/jquery/jquery.min.js"></script><scripttype="text/javascript"src="../UIFrame/static/plugins/jquery/jquery.cookie.js"></script><!--TopJUI框架配置--><scripttype="text/javascript"src="../UIFrame/static/public/js/topjui.config.js"></script><!--TopJUI框架核心--><scripttype="text/javascript"src="../UIFrame/topjui/js/topjui.core.min.js"></script><!--TopJUI中文支持--><scripttype="text/javascript"src="../UIFrame/topjui/js/locale/topjui.lang.zh_CN.js"></script><!--layui框架js--><scripttype="text/javascript"src="../UIFrame/static/plugins/layui/layui.js"charset="utf-8"></script><!--test功能模块对应的js，存放与根目录JS下--><scripttype="text/javascript"src="../js/test.js"charset="utf-8"></script>
</head><body>
<!--所有与此ID相关的DGrid进行替换，以模块名称进行相应的命名-->
<tableid="testDg"></table><!--表格工具栏开始-->
<divid="testDg-toolbar"class="topjui-toolbar"data-options="grid:{type:'datagrid',id:'testDg'}"><aid="add"href="javascript:void(0)">添加数据</a><aid="edit"href="javascript:void(0)">修改数据</a><aid="delete"href="javascript:void(0)">删除数据</a><aid="search"href="javascript:void(0)">综合查询</a><aid="import"href="javascript:void(0)">数据导入</a><aid="export"href="javascript:void(0)">数据导出</a><aid="analyse"href="javascript:void(0)">统计分析</a>    <aid="report"href="javascript:void(0)">报表打印</a> <formid="queryForm"class="search-box"><inputtype="text"name="username"data-toggle="topjui-textbox"data-options="id:'username',prompt:'用户名',width:100"><aid="queryBtn"href="javascript:void(0)">查询</a></form>
</div>
<!--表格工具栏结束--><!--表格行编辑窗口-->
<formid="editDialog"></form>
<inputtype="hidden"name="sss"id="sss"data-toggle="topjui-textbox">
</body>
</html>

/*** 单元格内容以进度条进行格式化显示*/
functionprogressFormatter(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>';returnhtmlstr;
}/*** 单元格内容进行格式化操作*/
functionoperateFormatter(value, row, index) {var htmlstr = '<button class="layui-btn layui-btn-xs" οnclick="openEditDiag(\'' + row.uuid + '\')">编辑</button>';htmlstr+= '<button class="layui-btn layui-btn-xs layui-btn-danger" οnclick="deleteRow(\'' + row.uuid + '\')">删除</button>';returnhtmlstr;
}/*** 以主键进行数据修改操作*/
functionopenEditDiag(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);});}});
}/*** 以主键方式对数据进行删除操作*/
functiondeleteRow(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'}});
});//自定义统计分析
functionanalyseShow() {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');}}]});
}//自定义报表打印
functionreportShow() {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');}}]});
}

转载于:https://www.cnblogs.com/zengcongcong/p/10712540.html

topjui中datagrid增删改查相关推荐

  1. Hibernate中对增删改查的小结

    Hibernate中对增删改查的小结 mysql中库表News,字段如下 id      |  int     |  auto_increment  |  primary key title   |  ...

  2. SqlServer 中的增删改查语句的语法

    一.增删改查SQL语法: 1.查询语句 第一种法方: select 列名 from table(数据库表名) where(条件) 第二种法方: select *(表示所有的列) from table( ...

  3. 增删查改html模板,dataGrid增删改查(EasyUI)示例源码

    源码示例前台套用easyui,利用ajax调用sql数据库对学生信息表进行增删改查 资源下载此资源下载价格为2D币,请先登录 资源文件列表 GridDemos.sln , 907 JSonHelper ...

  4. 巨杉数据库SequoiaDB在Java开发中的增删改查CURD

    文章目录 JSON应用开发 增删改查操作 1 快速入门 1.1 环境部署 部署SequoiaDB集群环境 部署Windows开发环境 1.2 正式开始 2 CURD教程 2.1 Java开发环境搭建 ...

  5. AngularJS 实现管理系统中的增删改查

      前 言 AngularJS 在一个管理系统中,不外乎都是增删改查. 现在有如下图书管理系统,实现简单的增删改查. 需要用到bootstrap.css .angular.js和angular-rou ...

  6. mysql查看修改记录_（转）MySql中监视增删改查和查看日志记录

    转载地址为:http://blog.51cto.com/hades02/1641652 首先在命令行输入 show global variables like '%general%' ,然后出现下面的 ...

  7. mysql中的增删改查

    显示数据库中有的表格 SHOW TABLES 增 新建表格 CREATE TABLE urls( id int, url varchar(100), description varchar(100) ...

  8. ci php做记录删除,CI(CodeIgniter)框架中的增删改查操作_PHP教程

    CodeIgniter的数据函数类在 \system\database\DB_active_rec.php 代码如下: class ModelName extends CI_Model { funct ...

  9. 中去掉外键_【Java笔记】035天，MySQL中的增删改查

    学习Java的第35天. 今天天除了学习MySQL中的各种约束,MySQL中DML的操作,还有MySQL查询语句ds-- MySQLdz中d的约束有: • 非空约束(not null) • 唯一性约束 ...

  10. java ee 修改_java ee 在数据库中执行增删改查

    1.先建一个主页面里面包含着添加方法 学生信息 {//1.连接数据库// 1)加载驱动 Class.forName("oracle.jdbc.driver.OracleDriver" ...

最新文章

  1. 风变编程python网址_风变编程Python：如何打造职场差异化竞争优势
  2. swift 语言 linux,苹果发布Swift 2.2编程语言：支持Ubuntu Linux系统
  3. python写界面进度条程序_Python中如何写控制台进度条的整理
  4. tableau linux无网络安装_举个栗子！Tableau 技巧（127）：购物篮分析之关联购买
  5. 镜头视场角计算工具_再谈远心镜头的设计及其独特的性能
  6. （25）System Verilog类外约束类内变量
  7. ╭☆难以割舍^_^就是牵挂☆╮
  8. python调用excel的宏_配置Office Excel运行Python宏脚本
  9. python-for x in range （注意要点、细节）
  10. 解决“无法删除文件：无法读源文件或磁盘”的方法（chkdsk）
  11. qsnctf queen wp
  12. Python-scrapy爬虫
  13. ubuntu桌面进不去的解决办法
  14. Math Alg. Root 数学算法笔记：开根号
  15. 当地特色旅游系统 计算机毕业设计 微信小程序开发
  16. ODDZ CITY正式登录快看漫画
  17. EXCEL装逼指南之动态进度条（项目经理必备技能）
  18. Laxcus大数据管理系统2.0（11）- 第九章 容错
  19. gitee如何解决GitHub下载速度慢的问题
  20. 怎么一键完美抠图？无需PS！快来看看！

热门文章

  1. 捷联惯导更新算法及误差分析汇总
  2. 运用python》pyautogui自动刷智慧树网课的脚本
  3. 计算机思维导论在线作业答案,大学计算机计算思维导论第讲习题及解析.pdf
  4. AI2(App Inventor 2)离线版服务器(AI伴侣2.47版)
  5. TSC条码打印机常见故障及解决方法
  6. Eclipse的安装
  7. 医院职工离职申请证明模板，共计10篇
  8. 一文详解光场在三维人脸建模中的应用
  9. 商场无线网络方案设计
  10. 主流HTML5游戏框架的分析和对比（Construct2、ImpactJS、CreateJS、Cocos2d-html5……）