easyui datagrid 增刪改查分頁 匯出 先上傳後匯入 NPOI批量匯入 匯出EXCEL
阿新 • • 發佈：2019-01-01
效果圖
資料庫程式碼
資料庫程式碼
create database CardManage use CardManage create table CardManage ( ID int identity(1,1) primary key, userDep nvarchar(10)not null, userName nvarchar(5)not null, userTel varchar(11)not null, carNum nvarchar(20)not null, fixedCarport nvarchar(20)null, ) insert CardManage values('研發部','小明','View Code13527748096','灑B13580','博士二二二二') insert CardManage values('研發部','小仝','13527748096','灑B13580','博士二二二二') insert CardManage values('醬油部','小華','13527748096','灑B13580','博士二二二二') truncate table CardManage select*from CardManage --第二個表不清楚欄位 和名字 我看文件那裡有猜的 -- 確定再加上去 create table projectManage ( ID int identityprimary key not null, projectName nvarchar(20)not null, manager_1 nvarchar(10) not null, manager_2 nvarchar(10) not null, monitor nvarchar(10) not null, isFire varchar(2) null , startTime datetime not null, endTime datetime not null, manager_1tel nvarchar(11) not null, manager_1company nvarchar(20) notnull, manager_2tel nvarchar(11) not null, manager_2company nvarchar(20) not null, monitortel nvarchar(11) not null, monitorcompany nvarchar(20) not null ) select *from projectManage insert projectManage values('裝機','小明','大明','工程監理','是','1990-9-9','2000-9-9','13527748096','13527748096','13527748096','13527748096','13527748096','13527748096') create proc a as truncate table CardManage go
車輛管理檢視程式碼
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link href="~/Scripts/eastui/themes/icon.css" rel="stylesheet" /> <link href="~/Scripts/eastui/themes/default/easyui.css" rel="stylesheet" /> <script src="~/Scripts/eastui/jquery.min.js"></script> <script src="~/Scripts/eastui/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function () { f(); }) function f() { $('#carportList').datagrid({ url: '../Che/select',//控制器/方法 pagination: true, pageSize: 10, //每頁記錄數 pageNumber: 1, //預設顯示第幾頁 pageList: [10, 15, 20], //分頁記錄數陣列 //singleSelect: true, rownumbers: true, //toolbar: "#toolbar", idField: 'ID', frozenColumns: [[ { field: 'ck', checkbox: true }, //{ title: '全選', field: 'EmpID', width: 80, sortable: true } ]], toolbar: [{ id: 'btnadd', text: '新增', iconCls: 'icon-add', handler: function () { $('#add_name').val(null);//清空文字框 $('#add_tel').val(null); $('#add_carNum').val(null); $('#add_dep').val(null); $('#add_fixedCarport').val(function () { var a = null }); $('#addCarWin').window('open'); } }, { text: '刪除', id: 'btn_admin_del', iconCls: 'icon-cut', handler: function () { del(); }, }, { text: 'excel匯出', id: 'excelout', handler: function () { window.open('/Che/ExportExcel'); } }, { text: 'npoi匯出', id: 'npoiout', handler: function () { window.open('/Che/npoiout') } } ], columns: [[ { field: 'userName', title: '姓名', width: 80, align: 'center' }, { field: 'userTel', title: '聯絡電話', width: 100, align: 'center' }, { field: 'carNum', title: '車牌號碼', width: 100, align: 'center' }, { field: 'userDep', title: '部門', width: 100, align: 'center' }, { field: 'fixedCarport', title: '固定車位', width: 150, align: 'center' }, { field: 'operation', width: 100, title: '操作', align: 'center', formatter: function (value, row, index) { return "<input id='delCarport' href='javascript:void(0)' type='button' value='刪除' onclick='Detailed();' \>" } } ]] }); var p = $('#carportList').datagrid('getPager'); $(p).pagination({ beforePageText: '第',//頁數文字框前顯示的漢字 afterPageText: '頁 共 {pages} 頁', displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄' }); // 初始化新增車位資訊視窗 $("#addCarWin").window({ title: '新增車位資訊', iconCls: 'icon-add', width: 'auto', height: 'auto', top: 100, modal: true, shadow: false, closed: true, maximizable: false, minimizable: false, resizable: false, draggable: false }); } //新增 function save() { $('#fm_add').form("submit", { url: '/Che/insert', onSubmit: function () { return $(this).form("validate"); //提交前驗證 }, success: function (result) { if (result == "1") { $('#addCarWin').dialog('close'); $.messager.alert("提示", "儲存成功") $('#carportList').datagrid('load', {}) } else { $.messager.alert("提示", "失敗"); } } }) } //搜尋 function sele() { var name = $('#s_name').val(); var carnum = $('#s_carNum').val(); var scar = $('#s_carport').val(); $('#carportList').datagrid('load', { name: name, carnum: carnum, scar: scar }); }; //刪除 function Detailed() { var row = $('#carportList').datagrid('getSelected'); var ID = row.ID; var userName = row.userName; $.messager.confirm('提示', '是否刪除' + row.userName + '相關資訊?', function (r) { if (!r) { return; } $.ajax({ type: 'post', url: "/Che/del", data: { id: ID }, success: function (msg) { if (msg.IsSuccess) { $.messager.alert('提示', '刪除成功！', 'info', function () { $('#carportList').datagrid("reload"); $('#carportList').datagrid('clearSelections'); }); } }, error: function () { $.messager.alert('錯誤', '刪除失敗！'); } }) }) } //批量刪除 function del() { var row = $('#carportList').datagrid('getSelected'); var rows = $('#carportList').datagrid('getSelections'); var ids = []; for (var i = 0; i < rows.length; i++) { ids.push(rows[i].ID) } //alert(ids); var name = []; for (var i = 0; i < rows.length; i++) { name.push(rows[i].userName) } names = name.toString(); //alert(ids); id = ids.toString(); //alert(id); if (!row) { $.messager.alert('提示', '請選擇要刪除的員工'); return; } else { $.messager.confirm('提示', '是否刪除專案名為“' + names + '”的專案?', function (r) { if (!r) { return; } $.ajax({ type: "POST", url: "/Che/delete/", data: { id: id }, success: function (msg) { if (msg = "1") { $.messager.alert('提示', '刪除成功！', 'info', function () { $('#carportList').datagrid("reload"); $('#carportList').datagrid('clearSelections'); }); } else { alert("刪除失敗"); } }, error: function () { $.messager.alert('錯誤', '刪除失敗！'); } }); }); } } $.extend($.fn.validatebox.defaults.rules, { mobile: {//value值為文字框中的值 validator: function (value) { var reg = /^1[3|4|5|8|9]\d{9}$/; return reg.test(value); }, message: '輸入手機號碼格式不準確.' }, CHS: {//只能輸入漢字 validator: function (value) { return /^[\u0391-\uFFE5]+$/.test(value); }, message: '只能輸