Easy UI实现行内编辑

最新推荐文章于 2021-11-01 09:06:03 发布

爱吃鱼的猫^_^

最新推荐文章于 2021-11-01 09:06:03 发布

阅读量1w

点赞数 5

分类专栏： web前端

本文链接：https://blog.csdn.net/zjx86320/article/details/43340725

版权

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

摘要由CSDN通过智能技术生成

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

效果图如下：

一、View页面

首先，引入easyui的js文件。

    <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/demo/demo.css">
    <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
    <link href="../../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" οnclick="append()">添加</a>
                <a href="javascript:void(0)" id="edit" class="easyui-linkbutton" iconcls="icon-edit" plain="true" οnclick="accept