topjui中datagrid增删改查
Posted zengcongcong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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增删改查的主要内容，如果未能解决你的问题，请参考以下文章
Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段