實現效果：當雙擊單元行時會顯示詳細信息，如下圖

前臺實現過程：

1.首先要設置一個div盒子，用來存放查詢出來的詳細信息

<div id="details" class="easyui-panel" title="明細面板(雙擊單號即可顯示哦！)" style="padding:3px"> 單據標號為:<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中的數據。這樣就可以實現雙擊單元行顯示信息的功能了！