Extjs2.0+gridPanel+checkbox读取从数据库中写入到xml文件的字段

最新推荐文章于 2012-01-21 00:49:13 发布

LMAOhuaNL

最新推荐文章于 2012-01-21 00:49:13 发布

阅读量2k

点赞数

分类专栏： asp.Net js 文章标签： extjs xml 数据库 textbox header function

本文链接：https://blog.csdn.net/LMAOhuaNL/article/details/6877821

版权

asp.Net 同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

28 篇文章 0 订阅

订阅专栏

 <style type="text/css">
        .x-grid-record-red table{   
          background-color: #E6F2FF; 
      }
    </style>
    <script type="text/javascript" language="javascript">
        //加载事件
        Ext.onReady(function() { });
        //选择已有合同
        function ChangeContract() {
            var MyRecord = Ext.data.Record.create([
           { name: 'ContractType' },//xml文件里面的节点
           { name: 'PayMoneyNotId' },
           { name: 'ContractName' },
           { name: 'ContractNo' },
           { name: 'PayMoney' },
           { name: 'ContractStartT' },
           { name: 'ContractEndT' },
           { name: 'ContractRemarks' },
           { name:'ContractNumber'}
          ]);
            var myReader = new Ext.data.XmlReader({//读取的xml文件   
                totalRecords: "results", //总records
                record: "ContractInfo", //xml文件的ContractInfo节点
                id: 'ContractId'       //xml文件的ContractId节点
            }, MyRecord);
            var myProxy = new Ext.data.HttpProxy({
                url: '/WebTest/DocumentManage/Contract.xml', //xml文件   
                success: function() {
                    //Ext.Msg.alert("提示", "成功了");   
                },
                failure: function() {
                    Ext.Msg.alert("提示", "下载数据失败"); //失败提示   
                }
            });
            //这里类似读取json数据方式   
            var mystore = new Ext.data.Store({
                proxy: myProxy,
                reader: myReader
            });
            var checkbox = new Ext.grid.CheckboxSelectionModel({ singleSelect: false }); //初始化一个checkbox
            var colM = new Ext.grid.ColumnModel([
                        checkbox,
                       { header: "合同类型",hidden:true, width: 60, dataIndex: "ContractType" }, //sortable排序
                       { header: "放款编码", width: 120, dataIndex: "PayMoneyNotId", sortable: true },
                       { header: "合同名称", width: 95, dataIndex: "ContractName" },
                       { header: "合同编号", width: 100, dataIndex: "ContractNo", sortable: true },
                       { header: "放款金额(万元)", width: 90, dataIndex: "PayMoney" },
                       { header: "起止日期", width: 100, dataIndex: "ContractStartT" },
                       { header: "截止日期", width: 100, dataIndex: "ContractEndT" },
                       { header: "备注", width: 100, dataIndex: "ContractRemarks" },
                       { header: "合同编号", width: 100, dataIndex: "ContractNumber" }
            ]);
            var grid = new Ext.grid.GridPanel({
                height: 330,
                id: "GpContract",
                width: 770,
                cm: colM,   //显示各个列   
                store: mystore, //数据源来自mystore   
                autoExpandColumn: 2,
                viewConfig: {
                    forceFit: true,
                    getRowClass: function(record, rowIndex, rowParams, store) {
                        //禁用数据显示红色
                        if ((rowIndex + 1) % 2 != 0) {//设置gridPanel奇数行的颜色
                            return 'x-grid-record-red';
                        } else {
                            return '';
                        }
                    }
                }
            });
            mystore.load(); //加载
            var win = new Ext.Window({
                id: "winContractInfo",
                title: "显示已有合同信息",
                height: 400,
                width: 780,
                // modal: true,
                buttonAlign: "center",
                resizable: true,
                frame: true,
                items: [grid],
                html:"<p></p>",
                buttons: [
                {
                    xtype: "button", text: "确定", handler: function() {
                        alert("你点击了确定按钮");
                        var sm = grid.getSelectionModel();
                        var store = grid.getStore();
                        var view = grid.getView();
   //下面是操作gridview循环的checkbox
                        for (var i = 0; i < view.getRows().length; i++) {
                            if (sm.isSelected(i)) {
                                var record = store.getAt(i); //获取gridPanel的行数
                                var ck_GetPayMoneyNotId = document.getElementsByName("AllSelect");
                                for (var j = 0; j < ck_GetPayMoneyNotId.length; j++) {
                                    if (ck_GetPayMoneyNotId[j].checked == true) {
                                        var ck_PayMoneyNotId = ck_GetPayMoneyNotId[j].id.substring(2, ck_GetPayMoneyNotId[j].id.length); //获取到当前的放款编码
                                    }
                                }
                                alert("checkbox:" + ck_PayMoneyNotId);
                                alert("gridPanel:" + record.get('PayMoneyNotId'));
                                //为界面的控件赋值
                                document.getElementById("txtContractName").options[document.getElementById("txtContractName").selectedIndex].text = record.get('ContractName');
                                document.getElementById("txtContractName").options[document.getElementById("txtContractName").selectedIndex].value = record.get('ContractNumber');
                                document.getElementById("txtContractNo").value = record.get('ContractNo');
                                document.getElementById("txtContractStartT").value = record.get("ContractStartT");
                                document.getElementById("txtContractEndT").value = record.get("ContractEndT");
                                document.getElementById("txtContractRemarks").value = record.get("ContractRemarks");
                            }
                        }
                                        
                        Ext.getCmp("winContractInfo").close();
                    }
                },
                {
                    xtype: "button", text: "关闭", handler: function() {
                        Ext.getCmp("winContractInfo").close();
                    }
                }
                ]
            });
                win.show();  //显示窗体

            //为gridPanel里面的checkbox增加rowselect选择事件
//            grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
//                alert('勾选了checkbox后，获得选中行的ContractNo这列的值是:' + grid.store.getAt(rowIdx).get('ContractNo'));
//                document.getElementById("txtContractName").options[document.getElementById("txtContractName").selectedIndex].text = grid.store.getAt(rowIdx).get('ContractName');
//                document.getElementById("txtContractName").options[document.getElementById("txtContractName").selectedIndex].value = grid.store.getAt(rowIdx).get('ContractNumber');
//                document.getElementById("txtContractNo").value = grid.store.getAt(rowIdx).get('ContractNo');
//                document.getElementById("txtContractStartT").value = grid.store.getAt(rowIdx).get("ContractStartT");
//                document.getElementById("txtContractEndT").value = grid.store.getAt(rowIdx).get("ContractEndT");
//                document.getElementById("txtContractRemarks").value = grid.store.getAt(rowIdx).get("ContractRemarks");
//            });
        }
        //下拉列表是否选择新增
        function IsSelectAdd() {
            if (document.getElementById("IsAdd").options[document.getElementById("IsAdd").selectedIndex].value == 1) {
                document.getElementById("txtContractName").disabled = true; //合同名称
                document.getElementById("txtContractNo").disabled = true;   //合同编号
                document.getElementById("txtContractStartT").disabled = true; //起始日期
                document.getElementById("txtContractEndT").disabled = true;  //截止日期
                document.getElementById("btnAutoContractNo").disabled = true; //自动编号
                document.getElementById("A1").disabled = false;  //选择已有这个标签不屏蔽
            } else {
                document.getElementById("A1").disabled = true;
                document.getElementById("txtContractName").disabled = false;
                document.getElementById("txtContractNo").disabled = false;
                document.getElementById("txtContractStartT").disabled = false;
                document.getElementById("txtContractEndT").disabled = false;
                document.getElementById("btnAutoContractNo").disabled = false; //如果选择新增的时候选择已有这个标签屏蔽
            }
        }
    </script>

//HTML

 <table style="width: 100%" id="ContractTab" runat="server">
                     <td>
                        <asp:GridView ID="gvLetterManageInfo" runat="server" AutoGenerateColumns="False" Width="100%"
                            SkinID="GridView" CssClass="commontable" GridLines="None" DataKeyNames="LmId">
                            <Columns>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <input type="checkbox" id='cb<%# Eval("LetterNo") %>' value='<%# Eval("LmID") %>'
                                            name="AllSelect" οnclick="SelectOne(this);" />
                                    </ItemTemplate>
                                    <HeaderStyle Width="5%" />
                                </asp:TemplateField>                    
                            </Columns>
                        </asp:GridView>
                    </td>
                    <tr>
                        <td colspan="3">
                            <div class="group">
                                子合同信息</div>
                        </td>
                        <td align ="center" ><font color='blue'>(编号规则：总合同编号-二位流水号【总合同-01】)</font></td>
                    </tr>
                    <tr>
                        <td class="textposition" style="width: 20%;">
                            总合同：
                        </td>
                        <td style="width: 30%;">
                            <asp:DropDownList ID="txtParentContractNo" runat="server" Width="90%" οnchange="GetContractNo();">
                            </asp:DropDownList>
                            <font color="red">*</font>
                        </td>
                        <td  colspan ="2" align="left" >
                        <font color="red">注：无总合同编号者，请选择“【无】”！</font>
                        </td>
                        <%--<td style="width: 10%;">
                        </td>--%>
                    </tr>
                    
                    <tr>
                        <td class="textposition" style="width:20%;">
                            是否新增：
                        </td>
                        <td style="width:30%;" align="left">
                           <%--<asp:DropDownList ID="IsAdd" runat="server" Width="90%"  οnchange=" return IsSelectAdd();">
                                <asp:ListItem Value="0">11</asp:ListItem>
                                <asp:ListItem Value="1">22</asp:ListItem>
                           </asp:DropDownList>--%>
                            <select id="IsAdd" style="width:90%;" οnchange="return IsSelectAdd()">
                                <option value="0">新增</option>
                                <option value="1">选择已有</option>
                            </select>                
                            <font color="red">*</font> 
                        </td>
                        <td style="width:20%;"> 
                        <a id="A1"   href="#" οnclick="ChangeContract()"  style="color: Blue;"> 选择已有</a>                   
                        </td>
                    </tr>
                    <tr>
                        <td class="textposition" style="width: 20%;">
                            合同名称：

                         </td>
                        <td style="width: 30%;">
                            <asp:DropDownList ID="txtContractName" runat="server" Width="90%">
                            </asp:DropDownList>
                            <font color="red">*</font>
                        </td>
                        <td class="textposition" style="width: 20%;">
                            合同编号：                        </td>
                        <td align="left" style="width: 30%">
                            <asp:TextBox ID="txtContractNo" runat="server" ReadOnly="false" 
                                CssClass="textbox" Width="45%"></asp:TextBox><font color="red">*</font>
                                <a id="btnAutoContractNo" runat="server" href="javascript:void(0)" οnclick="GetContractNo()" style="color: Blue;">
                            自动编号</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="textposition">
                            合同起始时间：                        </td>
                        <td>
                            <jyk:MyTextBox ID="txtContractStartT"  runat="server" Width="45%" InputType="Date"
                                MaxTextBox="txtContractEndT" />
                        </td>
                        <td class="textposition">
                            合同截止时间：                        </td>
                        <td>
                            <jyk:MyTextBox ID="txtContractEndT" runat="server" Width="45%" InputType="Date" MinTextBox="txtContractStartT" />
                        </td>
                    </tr>
                    <tr>
                        <td class="multirow">
                            备注：                        </td>
                        <td colspan="3">
                            <asp:TextBox ID="txtContractRemarks" runat="server" CssClass="textbox" Height="50px"
                                TextMode="MultiLine" Width="96%"></asp:TextBox>
                        </td>
                    </tr>
                </table>