利用KindEditor实现公司通讯录的维护

引言：

      本人所属施工单位，在建项目较多，通讯录是以项目为单位挂接在公司内部网站通讯录板块，以静态页面展示。一直以来都是项目部办公室通过电话、邮件等方式通知总部信息部门变更通讯录，日常维护的工作量较大。最近受领导委托设计一款能让项目部自助维护通讯录的软件，一二级部门标题要加以区分，要方便排序，方便维护，还要统一风格显示。

 

 

↑公司现有通讯录效果展示

        第一种方案是后台挂接Excel表格，前台展示，这种显示效果一般，不符合要求。

↑Excel通讯录效果展示

        第二种方案是后台单条录入，前台用表格（XXGrid,Repeater）展示，这种维护方便，但是不太方便排版。

↑第三方表格通讯录效果展示

        第三种方案是后台编辑HTML表格，前台使用css样式调整显示风格。这种方案符合预期，但是让非技术人员编辑HTML表格，而且要统一风格，难度有点大。于是构思怎样简化用户操作，想到了用在线编辑器固定Table样式，然后通过自定义按钮实现简单的文字调整。

  ↑预期效果展示

        其实技术实现并不难，主要是细节问题处理和调试工作繁琐，本人花费两天时间研究并实现了这个功能，下面详细展开说一下。

        我这里使用的是KindEditor，最新版可以到官网下载。

        首先新建一个空白页面，引用以下脚本文件：

<script src="Script/jquery-1.8.2.min.js"></script>
<script src="Script/kindeditor/kindeditor-all-min.js"></script>
<script src="Script/kindeditor/lang/zh-CN.js"></script>

        然后自己设计或从网上找一些漂亮的table样式，比如我在百度找了一段css样式（版权归原作者啊）：

 * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 40px 50px;
        }

        .demo {
            width: 600px;
            margin: 40px auto;
            font-family: 'trebuchet MS', 'Lucida sans', Arial;
            font-size: 14px;
            color: #444;
        }
        .header {
            text-align:center;
            background-color:#dfefff;
            height:90px;
            width:100%;
        }
        .footer {
            text-align:center;
            background-color:#dfefff;
            height:30px;
            width:100%;
            position:fixed;
            bottom:0;
        }
        table {
            *border-collapse: collapse; /* IE7 and lower */
            border-spacing: 0;
            width: 100%;
            border: solid #ccc 1px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            -webkit-box-shadow: 0 1px 1px #ccc;
            -moz-box-shadow: 0 1px 1px #ccc;
            box-shadow: 0 1px 1px #ccc;
        }

            table tr {
                -o-transition: all 0.1s ease-in-out;
                -webkit-transition: all 0.1s ease-in-out;
                -moz-transition: all 0.1s ease-in-out;
                -ms-transition: all 0.1s ease-in-out;
                transition: all 0.1s ease-in-out;
            }

                table .highlight,
                table tr:hover {
                    background: #fbf8e9;
                }

            table td,
            table th {
                border-left: 1px solid #ccc;
                border-top: 1px solid #ccc;
                padding: 10px;
                text-align: left;
            }

            table th {
                background-color: #dce9f9;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9)";
            -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            background-image: linear-gradient(top, #ebf3fc, #dce9f9);
            border-top-style: none;
            border-top-color: inherit;
            border-top-width: medium;
        }

                table td:first-child,
                table th:first-child {
                    border-left: none;
                }

                table th:first-child {
                    -moz-border-radius: 6px 0 0 0;
                    -webkit-border-radius: 6px 0 0 0;
                    border-radius: 6px 0 0 0;
                }

                table th:last-child {
                    -moz-border-radius: 0 6px 0 0;
                    -webkit-border-radius: 0 6px 0 0;
                    border-radius: 0 6px 0 0;
                }

            table tr:last-child td:first-child {
                -moz-border-radius: 0 0 0 6px;
                -webkit-border-radius: 0 0 0 6px;
                border-radius: 0 0 0 6px;
            }

            table tr:last-child td:last-child {
                -moz-border-radius: 0 0 6px 0;
                -webkit-border-radius: 0 0 6px 0;
                border-radius: 0 0 6px 0;
            }
        /*----------------------*/
        .zebra td,
        .zebra th {
            padding: 10px;
            border-bottom: 1px solid #f2f2f2;
        }

        .zebra .alternate,
        .zebra tbody tr:nth-child(even) {
            background: #f5f5f5;
            -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
            -moz-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
            box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
        }

        .zebra th {
            text-align: left;
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
            border-bottom: 1px solid #ccc;
            background-color: #eee;
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f5f5f5, endColorstr=#eeeeee)";
            background-image: linear-gradient(top, #f5f5f5, #eee);
        }

            .zebra th:first-child {
                -moz-border-radius: 6px 0 0 0;
                -webkit-border-radius: 6px 0 0 0;
                border-radius: 6px 0 0 0;
            }

            .zebra th:last-child {
                -moz-border-radius: 0 6px 0 0;
                -webkit-border-radius: 0 6px 0 0;
                border-radius: 0 6px 0 0;
            }

        .zebra tfoot td {
            border-bottom: 0;
            border-top: 1px solid #fff;
            background-color: #f1f1f1;
        }

            .zebra tfoot td:first-child {
                -moz-border-radius: 0 0 0 6px;
                -webkit-border-radius: 0 0 0 6px;
                border-radius: 0 0 0 6px;
            }

            .zebra tfoot td:last-child {
                -moz-border-radius: 0 0 6px 0;
                -webkit-border-radius: 0 0 6px 0;
                border-radius: 0 0 6px 0;
            }

View Code