<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <link rel="stylesheet" type="text/css" href="../easyui/themes/bootstrap/easyui.css"> <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"> <script type="text/javascript" src="../easyui/jquery.min.js"></script> <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> function jsonTimeStamp(milliseconds) { if (milliseconds != "" && milliseconds != null && milliseconds != "null") { var datetime = new Date(); datetime.setTime(milliseconds); var year = datetime.getFullYear(); var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1; var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours(); var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes(); var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds(); return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second; } else { return ""; } } function updateWebsite() { //获取选择的复选框 var checkedItems = $('#resultList').datagrid('getChecked'); var names = []; var ids = ""; $.each(checkedItems, function (index, item) { //获取当前选择行在表格中的索引 var index2 = $('#resultList').datagrid('getRowIndex', item); names.push(item.id);//把要传到后台的id存起来 ids += item.id + ","; $('#resultList').datagrid('deleteRow', index2);//删除当前表格的选中行,页面效果(不用刷新) }); // console.log(names.join(",")); if (confirm("确认删除数据?条数 : " + names.length)) { $.ajax({ type: "post", data: {ids: ids}, url: "/api/adminUpdate.do?type=MON", dataType: "json", error: function (data) { alert("操作异常: " + data.process_msg); }, success: function (data) { var result = data.result; if (result) { alert("操作成功!删除成功 " + data.deleteData + " 条数据,删除失败 " + data.deleteError + " 条"); $('#resultList').datagrid('reload'); } else { alert("操作失败" + data.process_msg); } } }); } } $(document).ready(function () { $('#resultList').datagrid({ columns: [[ {field: 'checkbox', checkbox:true}, {field: 'id',title:'id'}, {field: 'CATEGORY', title: '分类', width: '7%', sortable: 'true',formatter: function(value,row,index){ if(value=='1'){ return "分类1"; }else if(value=='2'){ return "分类2"; }else if(value=='3'){ return "分类3"; }else{ return "<font color='blue'>" + value + "</font>"; } }}, {field: 'WEBSITE', title: 'WEBSITE', width: '7%', sortable: 'true'}, {field: 'MONITOR', title: '字段名', width: '7%', sortable: 'true'}, {field: '_RULES', title: '描述', width: '7%', sortable: 'true'}, {field: 'TABLE', title: '表', width: '10%', sortable: 'true'}, {field: 'code', title: 'code', width: '15%', sortable: 'true'}, {field: 'LOGIN_NAME', title: '登录名', width: '13%', sortable: 'true'}, {field: 'WEBSITE_NAME', title: '城市', width: '7%', sortable: 'true'}, {field: 'CREATE_DATE', title: '创建时间', width: '10%', sortable: 'true',formatter:jsonTimeStamp} ]], singleSelect: false, selectOnCheck: true, checkOnSelect: true // , // onDblClickCell: function (rowIndex, field, value) { // $('#showParamsByValue').html(value); // $('#restartDialog').window('open'); // } }); var pager = $('#resultList').datagrid('getPager'); $(pager).pagination({ pageSize: 20,//每页显示的记录条数,默认为10 onSelectPage: function (pageNumber, pageSize) { $(this).pagination('loading'); $('#resultList').datagrid("reload", {pageNo: pageNumber, pageSize: pageSize}); $(this).pagination('loaded'); } }); }); //关闭弹层显示 function closeWindow(){ $('#restartDialog').window('close'); } function page_search() { var category = $("#category").val(); var website = $("#website").val(); if(category == -1){ category = ""; } // 先通过ajax获取数据,然后再传给datagrid $.ajax({ method : 'POST', url : '/api/adminQuery.do?type=MO&category='+category + "&website=" + website, async : false, dataType : 'json', beforeSend : function(jqXHR) { jqXHR.setRequestHeader('Authorization', 'Bearer ' + '3feee5b76d8e698f4'); }, success : function(data) { var basiclist = []; basiclist = data.raw_data; if(data.process_code != 'SCCS104'){ alert(data.process_msg); }else if(basiclist.length == 0){ alert("没有数据"); } $('#resultList').datagrid("loadData", basiclist); var basicdata = basiclist; $('#resultList').datagrid("loadData", basicdata.slice(0, 20)); $('#resultList').datagrid("getPager").pagination({ total:basicdata.length, onSelectPage:function (pageNo, pageSize) { var start = (pageNo - 1) * pageSize; var end = start + pageSize; $("#resultList").datagrid("loadData", basicdata.slice(start, end)); $(this).pagination('refresh', { total:basicdata.length, pageNumber:pageNo }); } }); }, error : function() { alert('error'); } }); } </script> <style> #showParamsByValue { margin-top: 2%; } .data-tips-info { font-size: small; font-weight: lighter; margin-top: 3%; } tbody tr{ height: 40px !important; } body { font-size: 20px !important; } </style> <div class="search-main"> <div class="search-conditions"> 分类: <select name="category" id="category" > <option value="-1">请选择</option> <option value="1">分类1</option> <option value="2">分类2</option> <option value="3">分类3</option> </select> website:<input type="text" name="website" id="website" class="easyui-textbox" style="width:10%"/> <button name="search" class="easyui-linkbutton" style="width:60px" onclick="page_search();">查 询</button> </div> <p></p> <div id="tt" class="easyui-tabs" style="width:100%;height:160%;"> <div title="查询结果" style="padding:10px;height:97%;" id="basic" align="center"> <div id="tb" style="width: 98%;" align="left"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="updateWebsite()">删 除</a> </div> <table id="resultList" class="easyui-datagrid c-datagrid" title="查询结果" style="height:80%" data-options="singleSelect:true,collapsible:true, method:'post', pagination:'true', pageSize:'20',sortName:'id',sortOrder:'asc',rownumbers:'true'"> </table> </div> </div> </div>
页面代码如上
界面:
实现功能: 不使用easyui 的原生删除方法(直接传删除链接)。进行批量删除,通过获取选中行在当前表格的索引进行页面无刷新效果实现
相关推荐
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案,所以查了一下EasyUI的相关资料,发现离线的中文API不太多,而且版本都比较老,索性自己讲EasyUI官网给扣下来,然后做了翻译,文档是2月份过年的时候...
easyui\easyui-accordion-demo.zip easyui\easyui-crud-demo.zip easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip ...
一套EASYUI的经典后台管理模板easyui的后台管理实例运行环境浏览器项目技术(必填)easyui+jquery1.4.4
本套教程主要讲解了easyUI和mvc结合开发项目的实例,以用户管理为模型,用easyUI做了数据表格的增加,删除,修改 分页,普通查询,组合查询,以及后端参数的接收和响应,导出EXCEL,批量导入数据等。特别是easyUI ...
2. MVC + easyUI + sqlserver2014 + eCharts 3. 主要功能:新增、修改、删除、分页、导出Excel文件、上传图片、权限设置、图形报表展示 (权限设置只是为了练习easyUI tree的使用,具体项目具体分析) (例子涉及两张表...
基于EasyUI 官方的帮助。 Application 使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD应用 使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and ...
完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统...
时隔4个月之久 EasyUI终于迎来大版本更新了 本次更新内容诸多 除了常规维护外 还新增了3个新组件 都很实用 详细的可以阅读更新说明 里面给了详细的解读 另外 从该版本开始我将会逐步的将EasyUI官方以及第三方较好...
一个利用easyui1.3.5+jquery2.0制作的系统框...本程序在疯狂秀才1.2版本基础上,进行了修改,修正了该版本不支持jquery2.0以上、easyui1.3以上的问题。
在使用UasyUI的时候,在一般的input输入框上添加class="easyui-textbox"属性,则在该输入框上添加的事件将不起作用,但是如果去掉class="easyui-textbox"变成一般的input则起作用。 控件的生成原理,它是把你原有的...
easyui三套精美皮肤,easyui三套精美皮肤,easyui三套精美皮肤,
easyui1.7中文api
有easyui绿色后台管理系统+H5手机界面,easyUI数字管理系统,easyUi信息考核系统,easyUI云平台四套模板
jquery EasyUI的API,方便使用easyui查看。。。。。。
EasyUi图标扩展样式大全(1700个),在用EasyUI做项目是发现自带的Icon图标太少,而且不是很美观。于是就有了下面的东西,很全的EasyUI图标.
easyui 日期选择器
这是一个easyui入门视频的分享下载地址,网盘下载 ,对于没有easyui基础的同学会很有帮助哦!讲师从一个一个组件慢慢的由浅入深的讲解,浅显易懂。适合初学者。
教程名称:超实用的jQuery-EasyUI视频教程(30集)课程目录:【】jQuery-EasyUI视频教程(01-02集)【】jQuery-EasyUI视频教程(03-04集)【】jQuery-EasyUI视频教程(05-06集)【】jQuery-EasyUI视频教程(07-08集...
工具类,包含easyui的基本操作说明,绿色版本,入门比较好
包含easyUI 的api,以及实例代码,基于java,让你轻松学会easyUI