javascript代码实例教程-JQueryEasyUI学习笔记（九）datagrid查找_js

上一篇: javascript代码实例教程-JQueryE... 下一篇:javascript代码实例教程-JQueryE...

javascript代码实例教程-JQueryEasyUI学习笔记（九）datagrid查找

发布时间：2019-05-26 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQueryEasyUI学习笔记（九）datagrid查找，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

今天说下基于datagrid框架的查询，后续会有删除、添加与修改：
这一系列笔记以easyui的框架使用为主，后台代码为辅，如有需要，我会尽量抽时间写后台；

无需多言，直接代码（希望不要再因为我把注释大部分写到代码中而给我踢出首页）：

然后是CenterPage.html框架中的代码，也就是tabs框架中的代码：

    //点击查找按钮出发事件
    function seArchFunc() {
        alert("123");
        $("#dg").datagrid("load", sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台
    }

//点击清空按钮出发事件
    function clearSearch() {
        $("#dg").datagrid("load", {});//重新加载数据，无填写数据，向后台传递值则为空
        $("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空
    }
</script>
<p class="easyui-tabs" fit="true" border="false">
    <p title="数据展示表格" border="false" fit="true">
        <p class="easyui-layout" fit="true" border="false">
            
            
            <p data-options="region:'north',title:'高级查询'" style="height: 100px; background: #F4F4F4;">
                <form id="searchForm">
                    <table>
                        <tr>
                            <th>用户姓名：</th>
                            <td>
                                <input name="name" /></td>
                        </tr>
                        <tr>
                            <th>创建开始时间</th>
                            <td>
                                <input class="easyui-datetimebox" editable="false" name="subStartTime" /></td>
                            
                            <th>创建结束时间</th>
                            <td>
                                <input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td>
                            <td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="searchFunc();">查找</a></td>
                            <td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="clearSearch();">清空</a></td>
                        </tr>
                    </table>
                </form>
            </p>
            <p data-options="region:'center',split:false">
                <table id="dg">
                </table>
            </p>
        </p>
    </p>
</p>

Jquery的扩展代码：

VAR sy = $.extend({}, sy);/*定义一个全局变量*/

sy.serializeObject = function (form) { /*将form表单内的元素序列化为对象，扩展Jquery的一个方法*/
    var o = {};
    $.each(form.serializeArray(), function (index) {
        if (o[this['name']]) {
            o[this['name']] = o[this['name']] + "," + this['value'];
        } else {
            o[this['name']] = this['value'];
        }
    });
    return o;
};

图示：

JQueryEasyUI学习笔记（九）datagrid查找

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQueryEasyUI学习笔记（九）datagrid查找全部内容，希望文章能够帮你解决javascript代码实例教程-JQueryEasyUI学习笔记（九）datagrid查找所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: javascript代码实例教程-JQueryE... 下一篇:javascript代码实例教程-JQueryE...

猜你在找的js相关文章

全站导航更多