Extjs2.0+gridPanel+checkbox读取从数据库中写入到xml文件的字段
2011-10-16 14:56
381 查看
<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" onclick="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%" onchange="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%" onchange=" return IsSelectAdd();"> <asp:ListItem Value="0">11</asp:ListItem> <asp:ListItem Value="1">22</asp:ListItem> </asp:DropDownList>--%> <select id="IsAdd" style="width:90%;" onchange="return IsSelectAdd()"> <option value="0">新增</option> <option value="1">选择已有</option> </select> <font color="red">*</font> </td> <td style="width:20%;"> <a id="A1" href="#" onclick="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)" onclick="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>
相关文章推荐
- Extjs GridPanel用XmlReader读取xml文件的数据
- Extjs GridPanel用XmlReader读取xml文件的数据 及mapping的使用规则
- (一)上传图片至服务器,写入到数据库Blob字段中,以及从数据库读取Blob信息(iframe父子页面传值)
- EXTJS gridpanel中的checkbox列 根据数据库值 来初始化是否被选
- (二)上传图片至服务器,写入到数据库Blob字段中,以及从数据库读取Blob信息(iframe父子页面传值)
- ExtJS 2.0 GridPanel基本表格简明教程
- 上传图片至服务器,写入到数据库Blob字段中,以及从数据库读取Blob信息(iframe父子页面传值)(1)
- C#写入和读取数据库blob字段代码
- 上传图片至服务器,写入到数据库Blob字段中,以及从数据库读取Blob信息(iframe父子页面传值)(2)
- EXTJS gridpanel中的checkbox列 根据数据库值 来初始化是否被选
- ExtJS 2.0 GridPanel基本表格简明教程
- Ext2.0教程二:基本表格GridPanel,从后台数据库取数据
- EXTJS中Gridpanel加载checkbox的使用方法
- Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
- 关于CheckBoxList点击多选的时候值可以保存到数据库中的一个字段中,同时在编辑读取的时候可以把数据库的值赋给CheckBoxList
- php checkbox 从数据库读取和写入
- Extjs:把EditorGridPanel表头的全选checkbox去掉
- ExtJS EditorGridPanel 示例之JSON格式Store前后台增删改查
- extjs4 tree panel grid 按每一行的内容指定editor
- 研究网狐读取数据库字段<一>