C#拼接表格

C#拼接表格
作者：秋名
撰写时间：2019年3月31日
关键技术：JavaScript + jquery+Asp.net MVC

    <table id="DataPrime" class="table table-hover table-bordered table-responsive table-striped">
                        <thead>
                            <tr>
                                <th hidden  w_index="ProofID"><input id="ProofID"  name="ProofID"/></th>//修改回填/修改内容。一定要加上隐藏域。
                                <th style="width:150px;">凭证日期</th>
                                <th  style="width:150px;">凭证字号</th>
                                <th style="width:150px;">摘要</th>
                                <th style="width:150px;">会计科目</th>
                                <th style="width:150px;">借方金额</th>
                                <th style="width:150px;">贷方金额</th>
                                <th style="width:150px;">现金流向</th>
                            </tr>
                        </thead>
                        <tbody id="PrimeDate"></tbody>//新增（修改）模态框，ID不可以相同。如果相同就会无法执行。
                    </table>

  <div class="panel-body">
                
                    <div class="text-center">
                        <button class="btn btn-success" type="button" id="InsFenlu">添加分录</button>
                        <button class="btn btn-danger" type="button" id="DeleFenlu">删除分录</button>
                        <button class="btn btn-info" type="reset" id="PinZheng">保存凭证</button>
                        <button class="btn btn-info" type="reset" id="Zhi">存为模板</button>
                        <button class="btn btn-info" type="button" id="InsProof">调用模板</button>
                    </div>
                </div>

var ArrLetter = new Array("1", "2", "3", "4", "5", "6");//声明一个变量数组

 //行内按钮
            function crearButton(record, rowIndex, colIndex, options) {
                return '<button type="button" class="btn btn-danger btn-sm" id="delectPrime" onclick="delectPrime(' + record.ProofID + ')">凭证</button> | <button type="button" class="btn btn-info btn-sm" id="UpdatePrime" onclick="UpdateProof(' + record.ProofID + ')">修改</button> ';
            }//拼接参数

 //修改模态框
            function UpdateProof(ProofID) {
                $("#PrimeDate").empty();//如果点击打开修改模态框，会出现自动加载多一行，可以添加“empty”进行清空。
            $("#modUpdatePrime").modal("show");
            var optionCount = $("#PrimeDate").find("tr").length;
            var str = '<tr>
<th><input type="text" class="form-control" name="aProofDate" id="' + ArrLetter[optionCount] + '"/></th>
<th><input type="text" class="form-control" name="Mark" id="'+ ArrLetter[optionCount] + '"/></th><th><input type="text" class="form-control" name="Summary" id="' + ArrLetter[optionCount] + '"/></th>
<th><select  class="form-control" name="SubjectID" id="UsSubject'+ ArrLetter[optionCount]
+ '"></select></th>
<th><input type="text" class="form-control" name="Lend" id="'+ ArrLetter[optionCount]+ '"onkeyup="value = value.replace(/[^0-9.]/g,\'\')"/></th>
<th><input type="text" class="form-control" name="Loan" id="'+ ArrLetter[optionCount] + '"  onkeyup="value = value.replace(/[^0-9.]/g,\'\')"/></th>
<th><select  class="form-control"name="CurrentID" id="UsCurrent' + ArrLetter[optionCount]+ '"></select></th>
</tr>';
            $("#PrimeDate").append(str);//把......附加上去

            $.ajaxSettings.async = false;//取消异步
                appendOption("UsSubject" + ArrLetter[optionCount] + "", "/CWGL/Subject/SelectSubjectID");//科目下拉框
                appendOption("UsCurrent" + ArrLetter[optionCount] + "", "/CWGL/Subject/SelectCurrentID");//资金下拉框
                $.post("/CWGL/Subject/SelectProofHT?proofId="+ ProofID ,function (date) {//关于修改回填数据，如果页面没有回填数据，那就断点看下有没有跳到控制层，如果没有跳过去，那就是你请求的路劲有问题（一般控制层代码没写错，都会有数据）
                    //console.log(date);
                    loadDatatoForm("DataPrime", date);//修改回填
              
                })
            }

//修改保存
  $("#XiuG").click(function () {
            var ProofID = $('#DataPrime [name="ProofID"]').val();
            var ProofDate = $('#DataPrime [name="aProofDate"]').val();
            var Mark = $('#DataPrime [name="Mark"]').val();
            var Summary = $('#DataPrime [name="Summary"]').val();
            var SubjectID = $('#DataPrime [name="SubjectID"]').val();
            var Lend = $('#DataPrime [name="Lend"]').val();
            var Loan = $('#DataPrime [name="Loan"]').val();
            var Baoh = $('#DataPrime [name="BaohID"]').val();
            var CurrentID = $('#DataPrime [name="CurrentID"]').val();
            var dateform = $("#fgf").serializeArray();//序列化表格
            // console.log(dateform);
            if (ProofDate != "") {
                var layerIndex = layer.load(0);
                $.post("/CWGL/Subject/UpdateProof", dateform,
                    function (msg) {
                        console.log(msg);
                        layer.close(layerIndex);
                        tbProof.refreshPage();//刷新表格
                        $("#modUpdatePrime").modal("hide");//隐藏模态框
                        layer.alert(msg, { icon: 1, title: '提示' });
                    });
            } else {
                layer.alert('请填写完整', { icon: 0, title: '提示' });
            }
        });