easyui的列表页面和添加修改对话框的整合页面

桃扇骨 2022-09-26 03:27 236阅读 0赞

这个是我在项目里用的jsp页面的easyui的应用。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib uri="http://emay.cn/jstl/emas" prefix="emas" %>
    <html>
     <head>
        <title>业务类型</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
         <style type="text/css">
    		#fm{
    		margin:0;
    		padding:10px 30px;
    		}
    		.ftitle{
    		font-size:14px;
    		font-weight:bold;
    		padding:5px 0;
    		margin-bottom:10px;
    		border-bottom:1px solid #ccc;
    		}
    		.fitem{
    		margin-bottom:5px;
    		}
    		.fitem label{
    		display:inline-block;
    		width:80px;
    		}
    	 </style>
         <script type="text/javascript">
         var datagridId="#tt";
         var adddialogueId="#dlg";
         var editdialogueId="#updatedlg";
         var addFormId="#fm";
         var editFormId="#updatefm";
         var addTitle="新增频道";
         var editTitle="编辑频道";
         var deleteConfirmMessage="你确定要删除吗?";
         var noSelectedRowMessage="你没有选择行";
         var searchFormId="#searchForm";
         var pageSize=5;
         var listUrl="business/listpage";
         var textUrl="${pageContext.request.contextPath}/sms/listpaget";
         var updateUrl="channel/update";
         var deleteUrl="channel/delete";
         var addUrl="channel/create";
         var url;
         var userurl="${pageContext.request.contextPath}/department/listuser";
         var saup;
         
         $(function() {
        	 showbusiness(); 
        });
        
        var url; 
        function showbusiness(){
        $("#tt").datagrid({
        	 		/* title: '用户管理', //标题 */
    	            method: 'post',
    	            iconCls: 'icon-edit', //图标
    	            singleSelect: false, //多选   
    	            //checkOnSelect:false,
    	            height: 470, //高度
    	            fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。
    	            striped: true, //奇偶行颜色不同
    	            collapsible: true,//可折叠
    	            url:listUrl, //数据来源
    	            sortName: 'id', //排序的列
    	            sortOrder: 'desc', //倒序
    	            pageNumber: 1,//当设置了 pagination 特性时，初始化页码。
    	            pageList : [pageSize,pageSize*2,pageSize*3],
        		    pageSize : pageSize, //当设置了 pagination 特性时，初始化页面尺寸的选择列表。
    	            remoteSort: true, //服务器端排序
    	            idField: 'id', //主键字段
    	            queryParams: {}, //查询条件
    	            pagination: true, //显示分页
    	            rownumbers: true, //显示行号 
        		    columns:[[
        		    			{field: 'ck', checkbox: true, width: 2}, //显示复选框
    		                    {field: 'id', title: '业务ID', width: 20, sortable: true,/*  hidden: true, */
    		                        formatter: function (value, row, index) {
    		                            return row.id;
    		                        }
    		                    },
    		                    {field:'name',title:'业务类型',width:100, sortable: true,
        							formatter: function (value, row, index) {
    		                            return row.name;
    		                        }
        						},
        						{field:'description',title:'描述',width:100, sortable: true,
        							formatter: function (value, row, index) {
    		                            return row.description;
    		                        }
        						},
        						{field:'createDate',title:'创建时间',width:100, sortable: true,
        							formatter: function (value, row, index) {
    		                            return row.createDate;
    		                        }
        						},
        						{field:'modifyDate',title:'修改时间',width:100, sortable: true,
        							formatter: function (value, row, index) {
    		                            return row.modifyDate;
    		                        }
        						} 
        				    ]],
        			 	/* toolbar: [
    		                {
    		                    text: '新建',
    		                    iconCls: 'icon-add',
    		                    handler: function () {
    		                        addrow();
    		                    }
    		                },
    		                '-',
    		                {
    		                    text: '修改',
    		                    iconCls: 'icon-edit',
    		                    handler: function () {
    		                        updaterow();
    		                    }
    		                },
    		                '-',
    		                {
    		                    text: '删除',
    		                    iconCls: 'icon-remove',
    		                    handler: function () {
    		                        deleterow();
    		                    }
    		                },
    		                '-' 
                		],   */  
    					onLoadSuccess: function () {
    		                $("#tt").datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
    		            }
        	 });
        }  
        
        //新建
        function addrow() { 
            $("#addsource").dialog("open").dialog('setTitle', '新建业务');
            $("#mytitle").html("新建业务类型");
            $("#fm").form("clear"); 
            
            url = "${pageContext.request.contextPath}/business/addbus"; 
        }
        //更新
        function updaterow() { 
        	var rows = $('#tt').datagrid('getSelections');
            //这里有一个jquery easyui datagrid的一个小bug，必须把主键单独列出来，要不然不能多选
            if (rows.length == 0) {
                $.messager.alert('提示', "请选择你要更新的业务", 'info');
                return;
            }
            if (rows.length > 1) {
                $.messager.alert('提示', "只能选择一个业务进行更新", 'info');
                return;
            } 
            $("#fm").form("load", rows[0]); 
            $("#addsource").dialog("open").dialog('setTitle', '更新业务');
            $("#mytitle").html("编辑业务类型");
            url = "${pageContext.request.contextPath}/business/updatebus";
        }
    
    
        //删除 
            
        function savebus(){ 
            $("#fm").form("submit", {
                url: url,
                method: 'post',
                onSubmit: function () {
                    return $(this).form("validate");
                },
                success: function (result) {
    				if(typeof result === 'object'){
    				    result = result;
    				}
    				else{
    				    result = eval("("+result+")")
    				}
                    if (result.result == "1") {
                        $.messager.alert("提示信息", "添加业务成功"); 
                       	$("#addsource").dialog("close");
                       	$('#tt').datagrid("load");
                    } else if (result.result == "2") {
                        $.messager.alert("提示信息", "更新业务成功");
                        $("#addsource").dialog("close");
                        $('#tt').datagrid("load");
                    } else {
                        $.messager.alert("提示信息", result.mes+"操作失败");
                    }
                }
            });
        }
      
        
        function deleterow() {
            var rows = $("#tt").datagrid('getSelections');
            //这里有一个jquery easyui datagrid的一个小bug，必须把主键单独列出来，要不然不能多选
            if (rows.length == 0) {
                $.messager.alert('提示', "请选择你要删除的业务", 'info');
                return;
            }
           	var ps = "";
           	$.each(rows, function (i, n) {
           		if (i == 0)
          		ps += "?id=" + n.id;
          		else
          		ps += "&id=" + n.id;
        	});
            $.post('${pageContext.request.contextPath}/business/todel' + ps, function (data) { 
            			if(data.result=='0'){
            				$.messager.alert('提示', data.mes, 'info');
            			}
            			else{
            				$.messager.confirm('提示', '确定要删除吗?', function (result) {
    			            if (result) {
    			                var rows = $("#tt").datagrid('getSelections');
    			                var ps = "";
    			                $.each(rows, function (i, n) {
    			                    if (i == 0)
    			                        ps += "?id=" + n.id;
    			                    else
    			                        ps += "&id=" + n.id;
    			                });
    			                $.post('${pageContext.request.contextPath}/business/delbus' + ps, function (data) {
    			                    $("#tt").datagrid('reload');
    			                    $.messager.alert('提示', data.mes, 'info');
    			                });
    			            }
    			        });
            			}
                        
                   }); 
        }
        
         
      
    </script>
      </head>
    <body>
    
    
    <div id="p" class="easyui-panel"  title="业务类型">
    		
    	    <div title="业务类型 " class="easyui-layout" > 
    		    
    		    <div id="buslist">
    			    	<table id="tt" data-options="border:false,toolbar:'#tb'">
    				 	</table>
    		   	</div> 
    </div>
    				<div id="tb" style="padding:5px;height:auto">						
    						<c:if test="${emas:contains(upList,'36') }">
    							<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" οnclick="addrow()">新建</a>
    						</c:if>
    						<c:if test="${emas:contains(upList,'36') }">
    							<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" οnclick="updaterow()">修改</a>
    						</c:if>
    						<c:if test="${emas:contains(upList,'37') }">
    							<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" οnclick="deleterow()">删除</a> 
    						</c:if> 
    				</div>
    <div id="addsource" class="easyui-dialog" style="width: 400px; height: 300px; padding: 10px 20px;"
         closed="true" buttons="#dlg-buttons" data-options="iconCls:'icon-save',resizable:true,modal:true">
        <div class="ftitle" id ="mytitle">
            新建或修改部门
        </div>
        <form id="fm" method="post" enctype="multipart/form-data">
        	<div class="fitem">
    			<label>
    				业务类型名称
    			</label>
    			<input name="id" type="hidden"/>
    			<input name="name" class="easyui-validatebox" required="true"/>
    			<input name="createDate" type="hidden"/>
    		</div>
    		<div class="fitem">
    			<label>
    				业务类型描述
    			</label>
    			<input name="description" class="easyui-validatebox" required="true"/> 
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="savebus()" iconcls="icon-save">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#addsource').dialog('close')" iconcls="icon-cancel">取消</a>
    </div> 
    </div>
    </div>
    </body>
    </html>