<script type="text/javascript">
    //自动有效日期
    $(document).on('afterchange.bjui.datepicker', '.j_custom_issuedate', function (e, data) {
        var pattern = 'yyyy-MM-dd'
        var start = end = data.value
        var $end = $(this).closest('tr').find('.j_custom_indate')

        if ($end.length) {
            end.setFullYear(start.getFullYear() + 10)
            end.setDate(start.getDate() - 1)
            $end.val(end.formatDate(pattern))
        }
    })

    //上传图片完成回调
    function custom_pic_upload_success(file, data, $upload) {
        var json = $.parseJSON(data)
        if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
            var pic = json.navTabId

            $upload.next().val(pic).next().html('<img src="' + pic + '" width="80" />')
        }
    }

    //删除回调
    $('#tabledit1').on('afterdelete.bjui.tabledit', function (e) {
        var $tbody = $(e.relatedTarget)

        console.log('你删除了一条数据，还有[' + $tbody.find('> tr').length + ']条数据！')
    })
</script>
<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="table-edit.html" method="post">
        <input type="hidden" name="pageNum" value="${model.pageNum}">
        <input type="hidden" name="numPerPage" value="${model.numPerPage}">
        <input type="hidden" name="orderField" value="${param.orderField}">
        <input type="hidden" name="orderDirection" value="${param.orderDirection}">
        <div class="bjui-searchBar">
            <label>姓名：</label><input type="text" value="" name="name" size="10">&nbsp;
            <label>护照号：</label><input type="text" value="" name="passportno" size="8">&nbsp;
            <label>出生日期:</label><input type="text" value="" name="birthday" size="10">&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <a class="btn btn-orange" href="javascript:;" onclick="$(this).navtab('reloadForm', true)" data-icon="undo">清空查询</a>&nbsp;
            <div class="alert alert-info search-inline"><i class="fa fa-info-circle"></i> 双击行可编辑</div>&nbsp;
            <div class="pull-right">
                <div class="btn-group">
                    <button type="button" class="btn-default dropdown-toggle" data-toggle="dropdown" data-icon="copy">
                        批量操作<span class="caret"></span></button>
                    <ul class="dropdown-menu right" role="menu">
                        <li><a href="book1.xlsx" data-toggle="doexport" data-confirm-msg="确定要导出信息吗？">导出<span
                                style="color: green;">全部</span></a></li>
                        <li><a href="book1.xlsx" data-toggle="doexportchecked" data-confirm-msg="确定要导出选中项吗？"
                               data-idname="expids" data-group="ids">导出<span style="color: red;">选中</span></a></li>
                        <li class="divider"></li>
                        <li><a href="ajaxDone2.html" data-toggle="doajaxchecked" data-confirm-msg="确定要删除选中项吗？"
                               data-idname="delids" data-group="ids">删除选中</a></li>
                    </ul>
                </div>
            </div>
            <button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tabledit1" data-num="1"
                    data-icon="plus">添加编辑行
            </button>&nbsp;
            <button type="button" class="btn-green" onclick="$(this).tabledit('add', $('#tabledit1'), 2)">添加编辑行2
            </button>
        </div>
    </form>
</div>
<div class="bjui-pageContent tableContent">
    <form action="ajaxDone2.html" id="j_custom_form" class="pageForm" data-toggle="validate" method="post">
        <table id="tabledit1" class="table table-bordered table-hover table-striped table-top" data-toggle="tabledit"
               data-initnum="0" data-action="ajaxDone3.html" data-single-noindex="true">
            <thead>
            <tr data-idname="customList[#index#].id">
                <th title="No."><input type="text" name="customList[#index#].no" class="no" data-rule="required"
                                       value="1" size="2"></th>
                <th title="客人姓名"><input type="text" name="customList[#index#].name" data-rule="required" value="熊大"
                                        size="5"></th>
                <th title="拼音姓"><input type="text" name="customList[#index#].surname" data-rule="required" value="Xiong"
                                       size="5"></th>
                <th title="拼音名"><input type="text" name="customList[#index#].enname" data-rule="required" value="Da"
                                       size="5"></th>
                <th title="性别"><select name="customList[#index#].sex" data-toggle="selectpicker" data-rule="required">
                    <option value="true">男</option>
                    <option value="false">女</option>
                </select></th>
                <th title="出生日期"><input type="text" name="customList[#index#].birthday" data-toggle="datepicker"
                                        data-rule="required" value="2010-01-02" size="10"></th>
                <th title="出生地"><input type="text" name="customList[#index#].birthplace" data-rule="required" value="火星"
                                       size="3"></th>
                <th title="居住地"><input type="text" name="customList[#index#].add" data-rule="required" value="森林"
                                       size="5"></th>
                <th title="护照号"><input type="text" name="customList[#index#].passportno" data-rule="required"
                                       value="010101" size="5"></th>
                <th title="签发日期"><input type="text" name="customList[#index#].issuedate" data-rule="required"
                                        class="j_custom_issuedate" data-toggle="datepicker" value="" size="10"></th>
                <th title="有效日期"><input type="text" name="customList[#index#].indate" data-rule="required"
                                        class="j_custom_indate" data-toggle="datepicker" value="" size="10"></th>
                <th title="签发地"><input type="text" name="customList[#index#].issueat" data-rule="required" value="北京"
                                       size="5"></th>
                <th title="签证"><input type="checkbox" name="customList[#index#].visa" class="j-icheck"
                                      data-toggle="icheck" value="true"></th>
                <th title="职业"><input type="text" name="customList[#index#].profession" data-rule="required" value=""
                                      size="10" data-toggle="lookup" data-url="table-edit-lookup.html"
                                      data-group="customList[#index#]" data-width="700" data-height="300"></th>
                <th title="手机"><input type="text" name="customList[#index#].mobile" data-toggle="spinner"
                                      data-rule="required" value="1111111" size="5"></th>
                <th title="备注"><textarea name="customList[#index#].note" data-toggle="autoheight" rows="1"></textarea>
                </th>
                <th title="照片">
                    <div id="fileInput-custom-i[#index#]"
                         data-toggle="upload"
                         data-uploader="ajaxPic.html?sessionid=?"
                         data-file-size-limit="1024000000"
                         data-file-type-exts="*.jpg;*.png;*.gif;*.mpg"
                         data-multi="true"
                         data-on-upload-success="custom_pic_upload_success"></div>
                    <input type="hidden" name="customList[#index#].pic" class="pic-name" value=""><span
                        class="pic-box"></span>
                </th>
                <th title="" data-addtool="true" width="100">
                    <a href="javascript:;" class="btn btn-green" data-toggle="dosave">保存</a>
                    <a href="ajaxDone2.html" class="btn btn-red row-del" data-confirm-msg="确定要删除该行信息吗？">删</a>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr data-id="1">
                <td data-id-val="1">1</td>
                <td>孙悟空</td>
                <td>Sun</td>
                <td>Wukong</td>
                <td data-val="02">男</td>
                <td>0100-01-01</td>
                <td>花果山</td>
                <td>灵山</td>
                <td>0000011</td>
                <td>1000-05-01</td>
                <td>9999-12-31</td>
                <td>五指山</td>
                <td data-val="false">--</td>
                <td>保镖、斗战圣佛</td>
                <td>1</td>
                <td>--</td>
                <td></td>
                <td data-noedit="true">
                    <button type="button" class="btn-green" data-toggle="doedit">编辑</button>
                    <a href="ajaxDone2.html" class="btn btn-red row-del" data-confirm-msg="确定要删除该行信息吗？">删</a>
                </td>
            </tr>
            <tr data-id="2">
                <td>2</td>
                <td>唐僧</td>
                <td>Tang</td>
                <td>Seng</td>
                <td data-val="true">男</td>
                <td>0600-10-11</td>
                <td>洛阳</td>
                <td>灵山</td>
                <td>0000012</td>
                <td>1000-04-01</td>
                <td>9999-12-31</td>
                <td>洛阳</td>
                <td data-val="true">是</td>
                <td>念经</td>
                <td>--</td>
                <td>--</td>
                <td></td>
                <td data-noedit="true">
                    <button type="button" class="btn-green" data-toggle="doedit">编辑</button>
                    <a href="ajaxDone2.html" class="btn btn-red row-del" data-confirm-msg="确定要删除该行信息吗？">删</a>
                </td>
            </tr>
            <tr data-id="3">
                <td>3</td>
                <td>猪八戒</td>
                <td>Zhu</td>
                <td>Bajie</td>
                <td data-val="true">男</td>
                <td>0400-10-11</td>
                <td>高老庄</td>
                <td>灵山</td>
                <td>0000013</td>
                <td>1001-06-01</td>
                <td>9999-12-31</td>
                <td>高老庄</td>
                <td data-val="false">--</td>
                <td>吃饭</td>
                <td>--</td>
                <td>--</td>
                <td></td>
                <td data-noedit="true">
                    <button type="button" class="btn-green" data-toggle="doedit">编辑</button>
                    <a href="ajaxDone2.html" class="btn btn-red row-del" data-confirm-msg="确定要删除该行信息吗？">删</a>
                </td>
            </tr>
            <tr data-id="4">
                <td>4</td>
                <td>沙和尚</td>
                <td>Sha</td>
                <td>Heshang</td>
                <td data-val="true">男</td>
                <td>0450-10-11</td>
                <td>流沙河</td>
                <td>灵山</td>
                <td>0000013</td>
                <td>1005-07-01</td>
                <td>9999-12-31</td>
                <td>流沙河</td>
                <td data-val="false">--</td>
                <td>罗汉</td>
                <td>--</td>
                <td>--</td>
                <td data-val="pic-id-4"><img src="images/logo.jpg" height="30"></td>
                <td data-noedit="true">
                    <button type="button" class="btn-green" data-toggle="doedit">编辑</button>
                    <a href="ajaxDone2.html" class="btn btn-red row-del" data-confirm-msg="确定要删除该行信息吗？">删</a>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li>
            <button type="button" class="btn-close" data-icon="close">取消</button>
        </li>
        <li>
            <button type="submit" class="btn-default" data-icon="save">全部保存</button>
        </li>
    </ul>
</div>