Easy UI实现行内编辑

最新推荐文章于 2025-06-24 20:33:33 发布

原创

最新推荐文章于 2025-06-24 20:33:33 发布 · 1w 阅读

这篇博文介绍了在高校云平台UI系统中使用EasyUI实现行内编辑的过程。内容包括在View页面引入EasyUI的JS文件，设置工具栏和表单，以及在Controller页面的修改和添加操作方法。作者分享了在理解和实现过程中遇到的困难，强调了清晰编程思路的重要性。

最近跟着勇霞师姐做我们高校云平台的UI系统，各个系统界面的管理。UI的系统虽然很小，但是技术内容很新鲜，这篇博文就像大家介绍一下我新接触的EasyUI的知识：开启行内编辑。

效果图如下：

一、View页面

首先，引入easyui的js文件。

    <link rel="stylesheet" type="text/css" href="https://blog.csdn.net/Content/jquery-easyui-1.3.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://blog.csdn.net/Content/jquery-easyui-1.3.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://blog.csdn.net/Content/jquery-easyui-1.3.2/demo/demo.css">
    <script type="text/javascript" src="https://blog.csdn.net/Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="https://blog.csdn.net/Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="https://blog.csdn.net/Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
    <link href="https://blog.csdn.net/CSS/index.css" rel="stylesheet" />

其次，是对工具栏和表单的设置。

    <div id="ContentAreas">

        <div class="easyui-panel" title="查询页面属性" >

             <div id="buttonAreas" style="margin-left: 10px; margin-top: 10px;">
                <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="append()">添加</a>
                <a href="/service/javascript:void(0)" id="edit" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="accept() " >保存