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'); } }] }); }