PHP+Ajax+Mysql+jeditable无刷新编辑表格源码实例

PHP+Ajax+Mysql+jeditable无刷新编辑表格源码实例,20210930105452.jpg,第1张

本文通过editable插件实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”保存到数据库;当点击“取消”按钮,则页面恢复到初始状态

jeditable优势

实时编辑,后台实时响应,并即时完成局部刷新。


可自定义输入表单类型,目前jeditable提供text,select,textarea类型。


响应键盘的回车和ESC键。


插件机制,本例提供与jquery ui的datepicker日历控件的整合。


接着我们用PHP举个示例表单:


这是一个用户信息的表格,从代码中可以发现响应的字段信息的td都给了一个class和id属性,并赋值。值得一提的是表格中的td对应的id的值是和数据库中的字段名称一一对应的,这样做就是为了在编辑时让后台获取相应的字段信息,后面的PHP代码中会讲到。


<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead>
        <tr class="table_title">
            <td colspan="4"><span class="open"></span>客户信息</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="20%" class="table_label">姓名</td>
            <td width="30%" class="edit" id="username"><?php echo $username; ?></td>
            <td width="20%" class="table_label">办公电话</td>
            <td width="30%" class="edit" id="phone"><?php echo $phone; ?></td>
        </tr>
        <tr>
            <td class="table_label">称谓</td>
            <td class="edit" id="solutation"><?php echo $solutation; ?></td>
            <td class="table_label">手机</td>
            <td class="edit" id="mobile"><?php echo $mobile; ?></td>
        </tr>
        <tr>
            <td class="table_label">公司名称</td>
            <td class="edit" id="company"><?php echo $company; ?></td>
            <td class="table_label">电子邮箱</td>
            <td class="edit" id="email"><?php echo $email; ?></td>
        </tr>
        <tr>
            <td class="table_label">潜在客户来源</td>
            <td class="edit_select" id="source"><?php echo $source; ?></td>
            <td class="table_label">有限期</td>
            <td class="datepicker" id="sdate"><?php echo $sdate; ?></td>
        </tr>
        <tr>
            <td class="table_label">职位</td>
            <td class="edit" id="job"><?php echo $job; ?></td>
            <td class="table_label">网站</td>
            <td class="edit" id="web"><?php echo $web; ?></td>
        </tr>
        <tr>
            <td class="table_label">创建时间</td>
            <td><?php echo $createtime; ?></td>
            <td class="table_label">修改时间</td>
            <td id="modifiedtime"><?php echo $modifiedtime; ?></td>
        </tr>
        <tr>
            <td class="table_label">备注</td>
            <td class="textarea" id="note" colspan="3"><?php echo $note; ?></td>
        </tr>
    </tbody>
</table>

转载请说明出处
UE资源网 » PHP+Ajax+Mysql+jeditable无刷新编辑表格源码实例

发表评论

欢迎 访客 发表评论

成为会员可下载全站资源!

查看演示 官网购买