• 基本表格示例

    示例

    源码

    <script type="text/javascript">
        function beforerenderrow(datai) {

            //单条渲染前回调函数 参数为本条记录 此函数主要功能为转换数据字典 转换后的值可以自定义名称 不冲突即可
            datai.xbInfo = zjs.getvals("sex", datai.xb);

            //目前我只转换了性别字段 其他字段还忘同学们自行研究
        };
    </script>

    <!--

    表单的id为关键点 取值是 主表格ID + Paras  表示此表单为主表格的搜索条件区域 此表单中input的id对应表格中字段名 即可搜索

    当表格数据少于前端缓存量(目前设置为200条)时 使用前端搜索模式 数据量大于缓存量时切换为服务器端搜索模式

    文本框输入800毫秒延迟自动搜索 选择器类字段即时生效

    -->
    <form id="DemossParas" class="cform" onsubmit="return false;">
        <table border="0" cellpadding="0" cellspacing="12">
            <tr>
                <td>姓名:</td>
                <td>
                    <input id="xm" type="text" /><!-- input的ID对应字段名 --></td>
                <td class="button">

                    <!-- 查询按钮勾子关键ID id="search" -->
                    <a id="search" class="a_all"><i class="icon-search f18"></i><span>查询</span></a>

                    <!-- 添加按钮勾子 add=添加页面的路径 添加按钮会调用弹窗 当弹窗关闭后 会自动将新增的数据 回传至表格中 -->
                    <a class="a_all" href="javascript:void(0);" add="/100/"><i class="icon-plus-sign"></i><span>添加</span></a>
                </td>
            </tr>
        </table>
    </form>

    <!-- 主表格 ID请保证页面唯一 关键属性

    cmd-select为获取表格数据的命令

    idkey为主键字段对应绑定到tr的id字段上 用于删除DOM

    beforerenderrow渲染单条回调函数 此函数用于转换数据字典 或者其他自定义动作 -->
    <table id="Demoss" class="ctable" border="0" cellpadding="0" cellspacing="0"
        cmd-select="Demos_List" idkey="ID" beforerenderrow="beforerenderrow()">
        <thead>
            <tr class="trth">
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出生日期</td>
                <td>所在地</td>
                <td>头像</td>
                <td>学历</td>
                <td>兴趣爱好</td>
                <td>喜欢章节</td>
                <td>打分</td>
                <td class="w12">操作</td>
            </tr>
        </thead>
        <tbody style="display: none;">

            <!-- 行必须样式uls 行主键字段id -->
            <tr class="uls" id="{{ID}}">
                <td>{{ID}}</td>
                <td>{{xm}}</td>
                <td>{{xbInfo}}</td>
                <td>{{csrq}}</td>
                <td>{{szd}}</td>
                <td><!-- 数据绑定方式可以随意 字段可以绑定到任意位置 比如图片的src 或者直接输出文本 -->
                    <img src="{{tx}}" style="width: 24px; height: 24px;" /></td>
                <td>{{xl}}</td>
                <td>{{xcah}}</td>
                <td>{{xhzj}}</td>
                <td><!-- 星星展示方式 star1 2 3 4 5为对应的星星 -->
                    <div class="starshow star{{df}}"></div>
                </td>
                <td class="tbody_btns">

                    <!-- 修改按钮关键勾子 update=修改文件路径 一般和新增是共用页面 但要多传本条数据的主键字段过去

                           .htm为伪静态 规则为/页面编号_主编号.htm-->
                    <a class="btn" update="/100_{{ID}}.htm"><i class="icon-file-text"></i>修改</a>

                    <!-- 删除命令关键点delete=命令名 deleteid为参数主键ID -->
                    <a class="btn" delete="Demos_Remove" deleteid="{{ID}}"><i class="icon-bitbucket"></i>删除</a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="100">
                    <div class="fr">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tfoot>
                                <tr><!-- 用于显示行数的关键勾子样式TotalRows -->
                                    <td>共 <span class="TotalRows">0</span> 条</td>

                                    <!-- pagesize页容量关键字段 可以自行增加option  -->
                                    <td>每页显示<select id="pagesize"><option>10</option></select>条</td>                               

                                    <!-- 当前页码关键勾子样式 PageIndex  -->
                                    <td>第 <span class="PageIndex">1/1</span> 页</td>

                                    <!-- 上一页命令关键勾子样式 prevPage-->
                                    <td><a href="javascript:void(0);" class="prevPage btn"><i class="icon-chevron-left"></i></a></td>

                                    <!-- 页码容器关键勾子样式 pageNumbers-->
                                    <td class="pageNumbers"></td>

                                    <!-- 下一页命令关键勾子样式 nextPage -->                                

                                    <td><a href="javascript:void(0);" class="nextPage btn"><i class="icon-chevron-right"></i></a></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>


    关于弹窗内的添加页面的示例 请参见《6.2 表单》

继续阅读

    uiZjs