使用 EasyUI 的 Datagrid 選擇到一筆記錄後，將這一筆完整的資料要送到後端 Java 接收，可以先轉換成 JSON 的格式再後送。

UI 的圖示如下，可以用 FireBug 去查看 JavaScript 裡的資料

datagrid

 

作法如下:

HTML 的 Java Script Code:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@    taglib prefix="i" uri="/esayui-tags" %>

<i:html title="easyui-datagrid & EasyUI Demo" >

<div class="col-sm-1"></div>
<div class="col-sm-10">
<i:form id="fmEmpIDLogin" action="Login"  method="post" isExtraPara="false">
                
                    <input name="reqCode" value="" type="hidden" />

    <table id="dg" class="easyui-datagrid" title="CheckBox Selection on DataGrid" style="width:100%;height:400px;padding:10px;"
            data-options="url:'Login_multiEmpID?reqCode=EmpIDList',method:'get',rownumbers:true,pagination:true,singleSelect:true,toolbar: '#tb'">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'empId',sortable:true"> <s:property value="getText('display.sc004.empid')"/> </th>
                <th data-options="field:'realName',sortable:true"> <s:property value="getText('display.sc004.alternatename')"/> </th>
                <th data-options="field:'companyName',sortable:true"> <s:property value="getText('display.sc006.name')"/> </th>
                <th data-options="field:'deptName',sortable:true"> <s:property value="getText('display.sc007.name')"/> </th>
                <th data-options="field:'deptsManagerId',hidden:true">MANAGER_ID</th>
                <th data-options="field:'userId',hidden:true">USER_ID</th>
            </tr>
        </thead>
    </table>

    <div id="tb" style="height:auto">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="submitForm()">Submit</a>
    </div>

</i:form>
</div>
<div class="col-sm-1"></div>
</i:html>

<script type="text/javascript">
    function submitForm(){
        $("#fmEmpIDLogin input[name='reqCode']").val("empIdLogin");
        var rowData = $('#dg').datagrid('getSelected');
        var cellRow = $("<input>").attr("type", "hidden").attr("name", "cellRow").val(JSON.stringify(rowData));
        $('#fmEmpIDLogin').append($(cellRow));
        $('#fmEmpIDLogin').submit();       
    }    
</script>

 

Java Code: 利用 String[] cellRow 接收，並用 Gson().fromJson(cellRow[0], Map.class); 作轉換即可

public class LoginAction extends BaseSupport {
    
    private String[] cellRow;    

    public String empIdLogin() throws Exception {
        String loginResult=SUCCESS;
        Userinfo userInfo = null;
        logger.debug(cellRow[0]);
        Map<String,Object> result = new Gson().fromJson(cellRow[0], Map.class);
        
        String userEmpID = result.get("empId") == null ? "" : result.get("empId").toString();
        
        return loginResult;
    }
        

    public String[] getCellRow() {
        return cellRow;
    }

    public void setCellRow(String[] cellRow) {
        this.cellRow = cellRow;
    }

}
arrow
arrow
    文章標籤
    easyui datagrid getSelected JSON Map
    全站熱搜
    創作者介紹
    創作者 MIS 的頭像
    MIS

    MISTECH 技術手抄本

    MIS 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄