数据字典管理思路

javascript：

1、思路一个页面两个form表单form1,form2。
2、利用Ajax进行查询。
3、重点是有一个页面form3表单与前面表单的form2相同 但查询出来的内容form3表单替换前面form2表单实现无刷新动态查询。

dictionary_index.jsp页面：

html：

<div class="container-fluid main">
            <ul class="breadcrumb">
                <li><h2>
                        <i class="i_icon icon-dictionary"></i> 字典管理
                    </h2></li>
                <li>&nbsp;&raquo;&nbsp;</li>
                <li><a href="plane_findAllPlane.action">首页</a> <span
                    class="divider">/</span></li>
                <li class="active">字典管理</li>
                <a onclick="insertRows()"
                    class="btn btn-success pull-right bottom_125"><i
                    class="icon-plus icon-white"></i> 添加选项</a>
            </ul>
            <div class="search">
                <form name="Form1" id="Form1" method="post" style="margin:0px;">
                    <table cellSpacing="1" cellPadding="0" width="90%" align="center"
                        bgColor="#f5fafe" border="0">
                        <tbody>
                            <tr>
                                <td class="ta_01" align="right" valign="middle" width="35%">类型列表：</td>
                                <td class="ta_01" align="left" width="30%" height="25px;">
                                     <s:select list="%{#request.dictionaryFormList}"
                                        name="type" cssClass="bg" cssStyle="bg"
                                        onchange="changetype()" listKey="type" listValue="type"
                                        value="#session.typename"></s:select> </td>

                                <td class="ta_01" align="right" width="35%"></td>
                            </tr>

                            <tr height=10>
                                <td colspan=3 align="right"></td>
                            </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <form name="Form2" id="Form2" method="post" style="margin:0px;">
                <table cellSpacing="1" cellPadding="0" width="100%" align="center"
                    bgColor="#f5fafe" border="0">
                    <tr>
                        <td>
                            <table
                                class="table table-hover table-striped table-bordered table_middle"
                                id="dictTbl">
                                <thead class="table_head">
                                    <tr>
                                        <th class="center_th" width="20%">编号</th>
                                        <th class="center_th" width="60%">名称</th>
                                    </tr>
                                </thead>
                                <tbody id="show">
                                    <tr>
                                        <td class="center_td" width="20%">1</td>
                                        <td class="center_td" width="60%"><input name="itemname"
                                            type="text" maxlength="25" style="margin-bottom:0px;"></input>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tr height=10>
                        <td colspan=3></td>
                    </tr>
                    <tr>
                        <td align="center" colspan=3></td>
                    </tr>
                    <input type="hidden" name="typename">
                </table>
                <div class="control-group">
                    <button class="btn pull-right bottom" type="button">取消，返回</button>
                    <button class="btn btn-primary pull-right bottom" type="button"
                        onClick="return saveDict();">保存</button>
                </div>
            </form>
        </div>

javaScript：

<script type="text/javascript">
    $(document).ready(function() {
        changetype();
    });

    /**
      使用Ajax框架进行异步操作：
         * 使用ajax引擎的send方法发送数据，发送的是Form1表单中的属性值做为参数
         * 通过system/elecSystemDDlAction_edit.do链接访问后台数据，
             获取到的查询结果放到dictionaryEdit.jsp中，用dictionaryEdit.jsp的内容替换到
           dictionaryIndex.jsp中Form2中
     */
    function changetype() {
        if (document.Form1.type.value == "jerrynew") {
                    window.location.reload();
            return;
        } else {
            var textStr = "";
            Pub.submitActionWithForm('Form2',
                    'page/dictionaryAction_edit.action', 'Form1');
        }
    }

    function saveDict() {
        if (document.Form1.type.value == "jerrynew") {
            alert("请选择类型！");
            return false;
        } else {

            document.Form2.typename.value = document.Form1.type.value; 
        }
        var tbl = document.getElementById("dictTbl");
        for (i = 1; i < tbl.rows.length; i++) {
            var name = tbl.rows[i].cells[1].children.item(0).value;
            if (Trim(name) == "") {
                alert("名称不能为空！");
                return false;
            }
        }
        for (k = 1; k <= tbl.rows.length - 2; k++) {
            for (m = k + 1; m <= tbl.rows.length - 1; m++) {
                var name1 = tbl.rows[k].cells[1].children.item(0).value;
                var name2 = tbl.rows[m].cells[1].children.item(0).value;
                if (name1 == name2) {
                    alert("名称不能相同！");
                    return false;
                }
            }
        }
        document.Form2.action = "dictionaryAction_save.action";
        document.Form2.submit();
    }


    function insertRows() {
        var tempRow = 0;
        var tbl = document.getElementById("dictTbl");
        tempRow = tbl.rows.length;
        var msg = "<tr><td class="center_td" width="20%">" + tempRow
                + "</td>";
        msg = msg
                + "<td class="center_td" width="60%"><input name="itemname" type="text" id=""+tempRow+"" maxlength=25  style="margin-bottom:0px;"></td>";
        $("#show").append(msg);
    }

    function insertRows2() {
        var tempRow = 0;
        var tbl = document.getElementById("dictTbl");
        tempRow = tbl.rows.length;
        var Rows = tbl.rows;//类似数组的Rows 
        var newRow = tbl.insertRow(tbl.rows.length);//插入新的一行 
        var Cells = newRow.cells;//类似数组的Cells 
        for (i = 0; i < 3; i++)//每行的3列数据 
        {
            var newCell = Rows[newRow.rowIndex].insertCell(Cells.length);
            switch (i) {
            case 0:
                newCell.append("<td class="center_td" width="20%">"
                        + tempRow + "</td>");
                break;
            case 1:
                newCell.innerHTML = "<td class="center_td" width="60%"><input name="itemname" type="text" id=""+tempRow+"" maxlength=25  style="margin-bottom:0px;"></td>";
                break;
            case 2:
                newCell.innerHTML = "<td class="center_td" width="20%"><a href='javascript:delTableRow(""
                        + tempRow
                        + "")'><img src=${pageContext.request.contextPath }/page/img/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a></td>";
                break;
            }
        }
    }

    function delTableRow(rowNum) {
        if (window.confirm('您确定要删除该条记录吗？')) {
            var typename = document.Form1.type.value;
            if (typename == "jerrynew") {
                var tbl = document.getElementById("dictTbl");
                if (tbl.rows.length > rowNum) {
                    tbl.deleteRow(rowNum);
                    for (i = rowNum; i < tbl.rows.length; i++) {
                        tbl.rows[i].cells[0].innerText = i;
                        tbl.rows[i].cells[2].innerHTML = "<a href='javascript:delTableRow(""
                                + i
                                + "")'><img src=${pageContext.request.contextPath }/page/img/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>";
                    }
                }
            } else {
                $
                        .ajax({
                            url : "dictionaryAction_delByTypeAndCode.action",
                            data : {
                                "code" : rowNum,
                                "type" : typename
                            },
                            type : "POST",
                            dataType : "json",
                            success : function(data) {
                                if (data.success) {
                                    var tbl = document
                                            .getElementById("dictTbl");
                                    if (tbl.rows.length > rowNum) {
                                        tbl.deleteRow(rowNum);
                                        for (i = rowNum; i < tbl.rows.length; i++) {
                                            tbl.rows[i].cells[0].innerText = i;
                                            tbl.rows[i].cells[2].innerHTML = "<a href='javascript:delTableRow(""
                                                    + i
                                                    + "")'><img src=${pageContext.request.contextPath }/page/img/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>";
                                        }
                                    }
                                } else {
                                    alert("删除失败！");
                                }
                            }
                        });
            }
        }
    }
</script>

dictionary_edit.jsp页面:

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<table cellSpacing="1" cellPadding="0" width="100%" align="center"
    bgColor="#f5fafe" border="0">
    <tr>
        <td>
            <table
                class="table table-hover table-striped table-bordered table_middle"
                id="dictTbl">
                <thead class="table_head">
                    <tr>
                        <th class="center_th" width="20%">编号</th>
                        <th class="center_th" width="60%">名称</th>
                    </tr>
                </thead>
                <tbody id="show">
                    <s:if
                        test="#request.dictionaryFormList!=null && #request.dictionaryFormList.size()>0">
                        <s:iterator value="%{#request.dictionaryFormList}"
                            var="dictionary">
                            <tr>
                                <td class="center_td" width="20%"><s:property
                                        value="%{#dictionary.code}" />
                                </td>
                                <td class="center_td" width="60%"><input name="itemname"
                                    type="text" value="${dictionary.value}" maxlength="25"
                                    style="margin-bottom:0px;"></input> 
                            </tr>
                        </s:iterator>
                    </s:if>
                    <s:else>
                        <tr>
                            <td class="ta_01" align="center" width="20%">1</td>
                            <td class="ta_01" align="center" width="60%"><input
                                name="itemname" type="text" size="45" maxlength="25"
                                style="height: 12px;"></td>
                        </tr>
                    </s:else>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr height=10>
        <td colspan=3></td>
    </tr>
    <tr>
        <td align="center" colspan=3></td>
    </tr>
    <input type="hidden" name="typename">
</table>
<div class="control-group">
    <button class="btn pull-right bottom" type="button">取消，返回</button>
    <button class="btn btn-primary pull-right bottom" type="button"
        onClick="return saveDict();">保存</button>
</div>

struts2.xml：

<!-- 字典管理 -->
        <action name="dictionaryAction_*" class="dictionaryAction"
            method="{1}">
            <result name="home">/page/dictionary_index.jsp</result>
            <result name="edit">/page/dictionary_edit.jsp</result>
            <result name="save" type="redirectAction">
                <!--<param name="namespace">page</param> -->
                <param name="actionName">dictionaryAction_home</param>
            </result>
        </action>

action：

//查找所有数据类型，去重复
    public String home(){
        List<DictionaryForm> dictionaryFormList = new ArrayList<DictionaryForm>();
        DictionaryForm dictionaryForm1 = new DictionaryForm();
        dictionaryForm1.setType("**");
        DictionaryForm dictionaryForm2 = new DictionaryForm();
        dictionaryForm2.setType("**");
        DictionaryForm dictionaryForm3 = new DictionaryForm();
        dictionaryForm3.setType("**");
        DictionaryForm dictionaryForm4 = new DictionaryForm();
        dictionaryForm4.setType("**");
        DictionaryForm dictionaryForm5 = new DictionaryForm();
        dictionaryForm5.setType("**");
        DictionaryForm dictionaryForm6 = new DictionaryForm();
        dictionaryForm6.setType("**");
        dictionaryFormList.add(dictionaryForm1);
        dictionaryFormList.add(dictionaryForm2);
        dictionaryFormList.add(dictionaryForm3);
        dictionaryFormList.add(dictionaryForm4);
        dictionaryFormList.add(dictionaryForm5);
        dictionaryFormList.add(dictionaryForm6);
        request.setAttribute("dictionaryFormList", dictionaryFormList);
        return "home";
    }
    
    public String edit(){
        String dictionaryType = dictionary.getType();
        List<DictionaryForm> dictionaryFormList = dictionaryService.getDictionaryFormListByType(dictionaryType);
        request.setAttribute("dictionaryFormList", dictionaryFormList);
        return "edit";
    }
    
    public String save(){
        dictionaryService.saveDictionary(dictionary);
        ServletActionContext.getRequest().getSession().setAttribute("typename", dictionary.getTypename());
        return "save";
    }

 参考文章：http://bbs.csdn.net/topics/390442975