easyui巨坑问题，记录一下以后解决

最新推荐文章于 2020-05-28 12:43:35 发布

原创最新推荐文章于 2020-05-28 12:43:35 发布 · 708 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui问题

HTML 专栏收录该内容

4 篇文章

订阅专栏

这篇博客详细记录了在使用EasyUI过程中遇到的一些坑，包括组件冲突、样式问题和功能实现困难等，旨在为后来者提供参考和解决思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>depList</title>
    <%--导入 easyui 所需要的 js 包等等 --%>
    <link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
    <script type="text/javascript" src="ui/jquery.min.js"></script>
    <script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>

    <%--导入将表单进行序列化的 js文件--%>
    <script type="text/javascript" src="ui/jquery.serializejson.min.js"> </script>
</head>
<body>
    <div id="search">
        <form id="searchForm">
            部门名称：<input type="text" name="name" id="name"/>
            部门电话：<input type="text" name="tele" id="tele"/>
            <button id="searchButton" type="button">查询</button>
        </form>
    </div>
    <div id="grid"></div>
</body>
    <script>

        $(function(){

            $('#grid').datagrid({
                url:'/dep_list.action',
                columns:[[
                    {field:'uuid',title:'部门编号',width:100},
                    {field:'name',title:'部门名称',width:100},
                    {field:'tele',title:'部门电话',width:100}
                ]],
                singleSelect : true
            });

            // 对查询按钮绑定事件
            $("#searchButton").bind('click',function() {

                // 首先需要拿到参数，这时候使用 表单序列化的 插件
                // 表单数据转换成json 对象
                var formData = $("#searchForm").serializeJSON();
                // 然后将json对象转换成 json 字符串,这里只是用来查看的
               // $.messager.alert(JSON.stringify(formData));
                //alert(JSON.stringify(formData));
                //然后调用 datagrid 的load 方法使用参数
                //$('#grid').datagrid('load',formData);
                // 通过ajax 的方法将数据移除
                $.ajax({
                    url:'/dep_listByCondition.action',
                    data: formData,
                    type:'POST',
                    dataType:'json',
                    success : function (rtn) {
                        $("#grid").datagrid('loadData',rtn);
                    }
                })

            });

        });
    </script>
</html>

在这里插入图片描述