jquery实现动态操作table

心已赠人 2022-07-14 03:43 268阅读 0赞

使用jquery实现动态创建行、删除行、行内计算、提交表格数据。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    	<script type="text/javascript" src="<%=basePath %>/js/jquery-1.11.3.min.js"></script>
    	<script type="text/javascript">
              //删除行
              function delRow(goodsId){
    		  $("#tr" + goodsId).remove();
    	    }
    	      //小计
    		function calcSubTotal(goodsId){
    		    var goodsNumber=$("#goodsNumber"+goodsId).val();
    		    var goodsPrice=$("#goodsPrice"+goodsId).text();
    			$("#subTotal" + goodsId).text(goodsNumber*goodsPrice);
    		}
            
            function thingsList(){
                window.showModalDialog("<%=basePath %>/manage/things/thingsList", window);  
            }
            //添加行
            function addRow(){
                var sessionStorage=window.localStorage;
                var thingsCount=sessionStorage.getItem("thingsCount");
                var thingsJson=JSON.parse(sessionStorage.getItem("selectedInfo"));
                for(var i=0;i<thingsCount;i++){
                    var thingsTemp=thingsJson[i];
                    if(thingsTemp!=null){
                        if($("#tr"+thingsTemp.id).length<=0){
                            $("#table1").append(crearteNewRowStr(thingsTemp.id,thingsTemp.name,thingsTemp.thingsType.name,
                            thingsTemp.thingsType.id,1,thingsTemp.buyPrice,thingsTemp.buyPrice));
                        }
                    } 
                }
            }
            
            function crearteNewRowStr(goodsId,goodsName,goodsType,goodsTypeId,goodsNumber,goodsPrice,goodsSubTotal){
    				var str="<tbody id=\"tr"+goodsId+"\"><td>"+goodsId+"</td><td id=\"goodsName"+goodsId+"\">"+goodsName+"</td><td>"+goodsType+
    				"<input type=\"hidden\" id=\"goodsType"+goodsId+"\" value=\""+goodsTypeId+"\"/>"+
    				"</td><td><input id=\"goodsNumber"+goodsId+"\" type=\"input\" size=\"10\" length=\"2\" value=\""+goodsNumber+
    				"\"οnchange=\"calcSubTotal('"+goodsId+"')\"/></td><td id=\"goodsPrice"+goodsId+"\">"+goodsPrice+"</td><td id=\"subTotal"+goodsId+"\">"+goodsSubTotal+
    				"</td><td><input id=\"delBtn\" οnclick=\"delRow('"+ goodsId + "')\" type=\"button\" value=\"删除\" /></td></tbody>"
    				return str;
    	}
    	//提交表格中的数据	
    	function getTableRows(){
    		    var tableRows=$("#goodsTable tbody").length;
    		    if(tableRows<=0){
    		       alert("选购商品列表为空，不可提交！");
    		       return;
    		    }
    		    var goodsIds="";
    		    var goodsNames="";
    		    var goodsTypes="";
    		    var goodsNumbers="";
    		    var goodsPrices="";
    		    for(var i=0;i<tableRows;i++){
    		        var rowStr=$("#goodsTable tbody")[i].innerHTML;
    		        var goodsId=rowStr.substr(rowStr.indexOf("<td>")+4,24);
    		        var goodsName=$("#goodsName"+goodsId).text();
    		        var goodsType=$("#goodsType"+goodsId).val();
    		        var goodsNumber=$("#goodsNumber"+goodsId).val();
    		        var goodsPrice=$("#goodsPrice"+goodsId).text();
    		        goodsIds=goodsIds+goodsId+","; 
    		        goodsNames=goodsNames+goodsName+","; 
    		        goodsTypes=goodsTypes+goodsType+","; 
    		        goodsNumbers=goodsNumbers+goodsNumber+",";
    		        goodsPrices=goodsPrices+goodsPrice+",";
    		    }
    		    var applyReason=$("#applyReason").val();
    		    var remark=$("#remark").val();
    		     $.ajax({  
                 url:"<%=basePath %>/manage/thingsApply/addMyApply",  
                 async : true,  
                type:"post",  
                dataType:"json",  
                data:{"id":goodsIds,"goodsName":goodsNames,"goodsTypeIds":goodsTypes,"applyCountStr":goodsNumbers,
                "applyPriceStr":goodsPrices,"applyReason":applyReason,"applyRemark":remark},  
                success:function(json){  
                   if(json.code==200){  
                      alert("操作成功");
                      document.getElementById("applyThingsForm").reset();
                      $("#table1 tbody").remove();
                   }else if(json.code==0){  
                       
                   }  
                }          
              });   
    		    
    	}
    	</script>
    	</head>
    	<body>
    	    <form id="applyThingsForm">
    	    <table align="center">
    	          <tr>
    	            <td colspan="4" align="center"><b>采购申请单</b></td>
    	          </tr>
    	          <tr>
    	             <td>采购理由</td>
    	             <td><textarea id="applyReason" name="applyReason"></textarea></td>
    	              <td>备注</td>
    	             <td><textarea id="remark" name="remark"></textarea></td>
    	          </tr>
    	          <tr>
    	            <td><input type="button" οnclick="javascript:thingsList()" value="选择商品" /> </td>
    	             <td><input type="button" οnclick="javascript:getTableRows()" value="提交商品" /></td>
    	          </tr>
    	    </table>
    	    </form>
    	    <hr/>
    		<table id="goodsTable" border="0"  align="center" width="60%">
    			<thead>
    				<td>商品编码</td><td>商品名称</td><td>商品分类</td><td>采购数量</td><td>采购单价</td><td>小计</td>
    			</thead>
    		</table>
    	</body>
    </html>

thingsList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
    <%
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
    %>
    <!DOCTYPE html>
    <html>
    <head>
        <jsp:include page="../../../include.jsp"/>
        <script type="text/javascript">
        var grid;
            $(function () {
                grid = $('#grid').datagrid({
                    title: '物品列表(选中行进行物品选则，多选)',
                    url: sy.contextManagePath + '/things/grid',
                    striped: true,
                    rownumbers: true,
                    pagination: true,
                    singleSelect: false,
                    showFooter: false,
                    pageSize: 20,
                    pageList: [20],
                    fit:true,
                    SelectOnCheck:true,
                    CheckOnSelect:true,
                    columns: [
                        [
    						{
    						    field: 'ck',
    						    checkbox: true,
    						},
                            {
                                title: '编号',
                                field: 'uuid'
                            },
                            {
                                title: '名称',
                                field: 'name'
                            },
                            {
                                title: '分类',
                                field: 'type',
                                formatter: function (value, row, index) {
                                    if(row.thingsType==null){
                                    return "";
                                    }
                                        return row.thingsType.name;
                                    }
                            },
                            {
                                title: '状态',
                                field: 'status'
                            },
                            {
                                title: '采购价钱',
                                field: 'buyPrice'
                            },
                            {
                                title: '市场价钱',
                                field: 'marketPrice'
                            },
                            {
                                title: '描述',
                                field: 'thingsDesc'
                            }
                        ]
                    ],
                    toolbar: '#toolbar',
                    onBeforeLoad: function (param) {
                        parent.$.messager.progress({
                            text: '数据加载中....'
                        });
                    },
                    onLoadSuccess: function (data) {
                        $('.iconImg').attr('src', sy.pixel_0);
                        parent.$.messager.progress('close');
                        $(".l-btn-text").css("width","100px");
                    }
                });
            });
            function selected(){
            	var rows = $("#grid").datagrid("getSelections"); 
            	var storage=window.localStorage;
            	storage.setItem("selectedInfo", JSON.stringify(rows));
            	storage.setItem("thingsCount",rows.length);
            	window.opener.addRow();
            	window.close();
            }
        </script>
    </head>
    <body class="easyui-layout" data-options="fit:true,border:false">
    <div id="toolbar" style="display: none;">
        <table>
             <tr>
                <td>
                    <form id="thingsForm">
                        <table>
                            <tr>
                                <td>名称</td>
                                <td><input name="thingsName" style="width: 200px;"/></td>
                                 <td>分类</td>
                                <td>                      
                                 <select name="type" class="easyui-combobox" style="width: 100%"
                                    data-options="panelHeight:'auto',editable:false">
                                     <option value="">请选择分类</option>
                                <c:forEach var="thingType" items="${thingsType}">
                                   
                                    <option value="${thingType.id}"
                                            <c:if test="${thingType.id eq things.thingsType.id}">
                                                selected="selected"
                                            </c:if>
                                            ><spring:message code="${thingType.name}"/>
                                    </option>
                                </c:forEach>
                            </select>
                            </td>
                                <td>
                                    <a href="javascript:void(0);" class="easyui-linkbutton"
                                       data-options="iconCls:'ext-icon-zoom',plain:true"
                                       οnclick="grid.datagrid('load',sy.serializeObject($('#thingsForm')));">过滤</a>
                                    <a href="javascript:void(0);" class="easyui-linkbutton"
                                       data-options="iconCls:'ext-icon-zoom_out',plain:true"
                                       οnclick="$('#thingsForm input').val('');grid.datagrid('load',{});">重置过滤</a>
                                    <a href="javascript:void(0);" class="easyui-linkbutton" 
                                       data-options="iconCls:'iconImg ext-icon-update',plain:true"
                                       οnclick="javascript:selected();">确认选择</a>
                                </td>
                              
                            </tr>
                        </table>
                    </form>
                </td>
            </tr> 
        </table>
    </div>
    <div data-options="region:'center',fit:true,border:false">
        <table id="grid" data-options="fit:true,border:false"></table>
    </div>
    </body>
    </html>