你的位置:首页 > Java教程

[Java教程]双击单元行显示详细信息


实现效果:当双击单元行时会显示详细信息,如下图

前台实现过程:

1.首先要设置一个div盒子,用来存放查询出来的详细信息

<div id="details" title="明细面板(双击单号即可显示哦!)" >
单据标号为:<span id="orderid"></span> 的明细如下所列!
<div id="createtable" ></div>
</div>

 

2.这里的订单列表是用ajax获得的后台数据显示在一个 datagrid数据表格中,代码如下:

$("#category_list").datagrid({    title:'销售订单管理列表',    fixed:true,    fitColumns:true,    url:'/ERP/order/orderListJsonServlet',    idField:'code',    singleSelect:false,    pagination:true,    pageList:[3,5,10,20],    toolbar:"#category_tb",    columns:[[    {field:'ck',checkbox:true},    {field:'code',title:'订单编号',width:70},    {field:'orderDate',title:'订单日期',width:60},    {field:'customercode',title:'客户名称',width:50},    {field:'nums',title:'数量',width:50},    {field:'total',title:'总货值',width:50},    {field:'contacter',title:'联系人',width:50},    {field:'telphone',title:'联系方式',width:70},    {field:'businesser',title:'业务人员',width:50},    {field:'state',title:'审核状态',width:30},    {field:'addUser',title:'操作员',width:50},      {field:'opt',title:'操作',width:100,formatter:function(val,row,idx){  var content="<input type='button' value='修改' onclick=\"setpwd("+idx+",'"+row.code+"','"+row.customercode+"','"+row.businesser+"','"+row.addUser+"')\"/>";        content+="<input type='button' value='删除' onclick=\"del('"+row.code+"')\"/>";      return content;    }}    ]]});

再将双击详细的功能加入到这个数据表中即可,代码如下

onDblClickRow:function(rowIndex,rowData){      $("#details").show();      $("span[id='orderid']").html(rowData.code);      $.ajax({        url:'/ERP/order/getOrderDetailListServlet',         data:{"code":rowData.code},        type:'post',        error:function(){          alert("抱歉,没有得到数据");        },        success:function(data){        $("#createtable").html("");        var table=$("<table rules=\"all\" border='1' ><tr style=\"border-color: 'blue' ;background-color:'teal' ;\"><td>报价单号</td><td>件号</td><td>配件名称</td><td>配件品牌</td><td>配件型号</td><td>数量</td><td>单价</td><td>金额</td><td>备注</td></tr>");        table.appendTo($("#createtable"));        var nums=0;        var price=0;         for(var i=0;i<data.rows.length;i++)         {          var tr=$("<tr></tr>");          price+=data.rows[i].totals;          nums+=data.rows[i].nums;          tr.appendTo(table);            var td0=$("<td>"+data.rows[i].code+"</td>");            td0.appendTo(tr);            var td1=$("<td>"+data.rows[i].partsNo+"</td>");            td1.appendTo(tr);            var td2=$("<td>"+data.rows[i].partsNname+"</td>");            td2.appendTo(tr);            var td3=$("<td>"+data.rows[i].partsBrand+"</td>");            td3.appendTo(tr);            var td4=$("<td>"+data.rows[i].partsModel+"</td>");            td4.appendTo(tr);            var td5=$("<td>"+data.rows[i].nums+"</td>");            td5.appendTo(tr);            var td6=$("<td>"+data.rows[i].price+"</td>");            td6.appendTo(tr);            var td7=$("<td>"+data.rows[i].totals+"</td>");            td7.appendTo(tr);            var td8=$("<td>"+data.rows[i].remark+"</td>");            td8.appendTo(tr);          }        }      });    }

特别注意的是这里是动态生成table表格,故在每次双击详显时要先清空数据,加入$("#createtable").html("");就不会有数据叠加,上面

getOrderDetailListServlet里是获取table中的数据。这样就可以实现双击单元行显示信息的功能了!