easyUI使用範例

原創 iteye_1944 2020-02-20 14:13

easyUI示例

course.jsp
<html>
<head>
    <title>課程管理</title>
    <%@include file="/WEB-INF/pages/inc/inc_back.jsp" %>
    <script type="text/javascript" src="<%=WebConfig.JS_ROOT%>/js/sys/course.js"></script>
</head>
<body>
<!--
easyui-layout佈局表示自適應當前窗口，其下級元素必須包含center，
可包含west、east、north、south，一般可將該佈局作用於body上，然後添加監控，
讓其根據窗口的改變來自適應調整，例如下面示例
οnresize="javascript:$('#qualificationGrid').datagrid('resize')"
-->
<div class="easyui-layout" style="width: 100%;height: 100%">
    <div id="course-grid" region="center">
        <table id="course-datagrid" title="課程列表">
        </table>
    </div>
</div>
<!--這段程序主要是爲了實現對課程信息預覽、新增、修改界面的共用-->
<jsp:include page="/WEB-INF/pages/inc/inc_course_form.jsp" flush="true">
    <jsp:param name="$$winName" value="course-win"></jsp:param>
    <jsp:param name="$$formName" value="course-form"></jsp:param>
    <jsp:param name="$$type" value="<%=WebConfig.INCLUDE_ADD%>"></jsp:param>
</jsp:include>
<jsp:include page="/WEB-INF/pages/inc/inc_course_form.jsp" flush="true">
    <jsp:param name="$$winName" value="course-win-view"></jsp:param>
    <jsp:param name="$$formName" value="course-form-view"></jsp:param>
    <jsp:param name="$$type" value="<%=WebConfig.INCLUDE_VIEW%>"></jsp:param>
</jsp:include>
<jsp:include page="/WEB-INF/pages/inc/inc_course_form.jsp" flush="true">
    <jsp:param name="$$winName" value="course-win-edit"></jsp:param>
    <jsp:param name="$$formName" value="course-form-edit"></jsp:param>
    <jsp:param name="$$type" value="<%=WebConfig.INCLUDE_EDIT%>"></jsp:param>
</jsp:include>
 
</body>

</html>

 

 

course.js
  
function submitForm(formId, winId) {
    var url = WEB_ROOT + '/sys/course/add';
    formSubmitCommonMethod(formId, winId, url, function () {
        $("#course-datagrid").datagrid('reload');
    });
}
function remove() {
    var node = $("#course-datagrid").datagrid("getSelected");
    $.post(WEB_ROOT + "/sys/coursetype/delete", {"courseType.courseTypeId":node.id}, function (data) {
        $("#course-datagrid").datagrid("remove", node.target);
    }, 'json');
}
/**
* clear方法需換成reset方法，將引入高版本的easyui
* @param formId
*/
function reset(formId) {
    $("#" + formId).form('clear');
}
 
function formSubmitCommonMethod(formId, winId, url, fun) {
    var fId = "#" + formId, wId = "#" + winId;
    $(fId).form("submit", {
        url:url,
        onSubmit:function () {
 
        },
        success:function (data) {
            $(fId).form('clear');
            $(wId).window('close');
            if (typeof fun == 'function') {
                var d = eval('(' + data + ')');
                fun(d);
            }
        }
    })
}
 
 
//course
 
function showWindow(winId, c) {
    if (c === undefined) {
        var w = $(window).width() * 0.3;
        var h = $(window).height() * .97;
        c = {
            width:w,
            height:h,
            top:($(window).height() - h) * 0.5,
            left:($(window).width() - w) * 0.5,
            draggable:true,
            minimizable:false,
            maximizable:false,
            resizable:false,
            collapsible:false,
            modal:true
        }
    }
    var win = $("#" + winId).window(c);
    win.window('open');
}
 
function add(formId, winId) {
    $.messager.progress();
    var url = WEB_ROOT + "/sys/course/add";
    formSubmitCommonMethod(formId, winId, url, function (d) {
        $.messager.progress('close');
        if (!d.code) {
            $("#course-datagrid").datagrid('reload');
        }
        $.messager.alert('提示', d.msg);
    });
}
 
function edit(formId, winId) {
    var url = WEB_ROOT + "/sys/course/update";
    formSubmitCommonMethod(formId, winId, url, function (data) {
        if (!data.code) {
            $("#course-datagrid").datagrid('reload');
        }
        $.messager.alert('提示', data.msg);
    });
}
$(document).ready(function () {
    $("#course-datagrid").datagrid({
        url:WEB_ROOT + '/sys/course/list',
        method:"GET",
        pagination:true,
        fitColumns:true,
        fit:true,
        singleSelect:true,
        pageSize:10,
        toolbar:[
            {
                iconCls:'icon-add',
                handler:function () {
                    showWindow("course-win");
                }
            },
            '-',
            {
                iconCls:'icon-edit',
                handler:function () {
                    var param = $("#course-datagrid").datagrid('getSelected');
                    if (param) {
                        $.getJSON(WEB_ROOT + '/sys/course/get', {'course.courseId':param["courseId"]}, function (data) {
                            for (var i in data) {
                                if ($("#course-form-edit-" + i).hasClass("easyui-combobox")) {
                                    $("#course-form-edit-" + i).combobox('setValue', data[i]);
                                } else {
                                    $("#course-form-edit-" + i).val(data[i]);
 
                                }
                            }
                            showWindow("course-win-edit");
                        });
                    } else {
 
                    }
                }
            },
            '-',
            {
                iconCls:'icon-remove',
                handler:function () {
                    var param = $("#course-datagrid").datagrid('getSelected');
                    if (param) {
                        $.messager.confirm('是否刪除', '確定刪除該配置?', function (r) {
                            if (r) {
                                $.post(WEB_ROOT + '/sys/course/delete', {'course.courseId':param["courseId"]}, function (data) {
                                    $("#course-datagrid").datagrid('reload');
                                })
                            }
                        });
 
                    }
                }
            },
            {
 
            }
        ]
        /*'#courseToolbar'*/,
        loadMsg:'正在幫你搜索數據，請稍等',
        columns:[
            [
                {field:'courseId', title:'課程ID', rowspan:2, width:80, sortable:true},
                {field:'courseName', title:'課程名稱', rowspan:2, width:80, sortable:true},
                {field:'courseTeacher', title:'上課教師', rowspan:2, width:80, sortable:true},
                {field:'coursePhone', title:'聯繫電話', rowspan:2, width:80, sortable:true},
                {field:'coursePublishUserId', title:'課程發佈者ID', rowspan:2, width:80, sortable:true, formatter:function (value, row, index) {
                    var str = "可改配置";
                    if (!value) {
                        str = "只讀配置";
                    }
                    return str;
                }, styler:function (value, row, index) {
                    var style = "color:blue";
                    if (!value) {
                        style = "color:red";
                    }
                    return style;
                }},
                {field:'courseToStudent', title:'面向的學生', rowspan:2, width:80, sortable:true},
                {field:'courseAddress', title:'上課地點', rowspan:2, width:80, sortable:true},
                {field:'courseCharge', title:'課程收費', rowspan:2, width:80, sortable:true},
                {field:'courseTypeOne', title:'課程類別', rowspan:2, width:80, sortable:true},
                {field:'courseContent', title:'課程詳情', rowspan:2, width:80, sortable:true},
                {field:'courseStarTime', title:'上課時間', rowspan:2, width:80, sortable:true},
                {field:'courseEndTime', title:'結束時間', rowspan:2, width:80, sortable:true},
                {field:'courseHitsCount', title:'點擊率', rowspan:2, width:80, sortable:true},
                {field:'courseOrder', title:'課程排序', rowspan:2, width:80, sortable:true}
            ]
        ],
        onBeforeLoad:function (param) {
            /*   if (!param["course.courseId"]) {
             return false;
             }*/
        }
    });
    $(window).bind('resize', function (w) {
        $("#course-win").window('resize', {
            height:$(this).height() * .97
        });
        $("#course-win-view").window('resize', {
            height:$(this).height() * .97
        });
        $("#course-win-edit").window('resize', {
            height:$(this).height() * .97
        });
        $("#course-grid").panel('resize', {
            height:$(this).height()
        })
    });
});
 
inc_course_form.jsp
<%@ page import="com.pudu.base.application.WebConfig" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String $$winName = request.getParameter("$$winName");
    String $$formName = request.getParameter("$$formName");
    String $$type = request.getParameter("$$type");
    boolean addType = WebConfig.INCLUDE_ADD.equals($$type);
    boolean viewType = WebConfig.INCLUDE_VIEW.equals($$type);
    boolean editType = WebConfig.INCLUDE_EDIT.equals($$type);
%>
<div id="<%=$$winName%>" class="easyui-window" iconCls="icon-save" title="增加課程"
     closed="true">
    <div style="padding:10px;">
        <form id="<%=$$formName%>" class="easyui-form" method="post">
            <table>
                <%
                    if (!addType) {
                %>
                <tr>
                    <td><input id="<%=$$formName+"-courseId"%>" type="hidden" name="course.courseId"/></td>
                </tr>
                <%
                    }
                %>
                <tr>
                    <td>課程名稱:</td>
                    <td><input id="<%=$$formName+"-courseName"%>" name="course.courseName" type="text"/></td>
                </tr>
                <tr>
                    <td>上課教師:</td>
                    <td><input id="<%=$$formName+"-courseTeacher"%>" name="course.courseTeacher" type="text"/></td>
                </tr>
                <tr>
                    <td>聯繫電話:</td>
                    <td><input id="<%=$$formName+"-coursePhone"%>" name="course.coursePhone" type="text"/></td>
                </tr>
                <tr>
                    <td>課程面向學生:</td>
                    <td><input id="<%=$$formName+"-courseToStudent"%>" name="course.courseToStudent" type="text"/></td>
                </tr>
                <tr>
                    <td>上課地點:</td>
                    <td><select id="<%=$$formName+"-courseAddress"%>" name="course.courseAddress"
                                class="easyui-combobox">
                        <option value="0">湖南省</option>
                        <option value="1" selected="selected">湖北省</option>
                    </select></td>
                </tr>
                <tr>
                    <td>課程收費:</td>
                    <td><input id="<%=$$formName+"-courseCharge"%>" name="course.courseCharge" type="text"/></td>
                </tr>
                <tr>
                    <td>課程類型:</td>
                    <td><input id="<%=$$formName+"-courseTypeOne"%>" name="course.courseTypeOne" type="text"/></td>
                </tr>
                <tr>
                    <td>課程詳情:</td>
                    <td><textarea id="<%=$$formName+"-courseContent"%>" rows="2" cols="19"
                                  name="course.courseContent"></textarea></td>
                </tr>
                <tr>
                    <td>開課時間:</td>
                    <td><input id="<%=$$formName+"-courseStarTime"%>" name="course.courseStarTime" type="text"/></td>
                </tr>
                <tr>
                    <td>課程結束時間:</td>
                    <td><input id="<%=$$formName+"-courseEndTime"%>" name="course.courseEndTime" type="text"/></td>
                </tr>
                <tr>
                    <td>課程排序:</td>
                    <td><input id="<%=$$formName+"-courseOrder"%>" name="course.courseOrder" type="text"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div style="text-align:center;padding:5px">
        <%
            if (addType) {
        %>
        <a href="javascript:void(0);" id="conf-add" class="easyui-linkbutton" iconCls="icon-add"
           οnclick="add('<%=$$formName%>','<%=$$winName%>');">增加</a>
        <%
        } else if (editType) {
        %>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit"
           οnclick="edit('<%=$$formName%>','<%=$$winName%>');">編輯</a>
        <%
            }
            if (addType || editType) {
        %>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-undo" οnclick="reset('<%=$$formName%>');">重置</a>
        <%
            }
        %>
 
    </div>
</div>
 
iteye_1944
發佈了19 篇原創文章 · 獲贊 1 · 訪問量 2568
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

easyUI使用摘要

easyUI的編碼方式主要有三種 一、在html代碼中聲明，在js代碼中細化處理   <!--此處表示聲明瞭一個Table容器--> <table id="qualificationGrid"></table> <!--接下來在js代碼

iteye_1944 2020-07-02 00:05:31

extjs中用到的小圖標集（1000個）

分享一下： 這些是extjs中常用的小圖標集合，有1000個（下有附件） 下面提供一下幾個地址也可以下載的到： 1、http://coolshell.cn/articles/3.html 2、http://my.oschina.net/

iteye_1944 2020-07-02 00:05:30

aralejs與alice

介紹個前端的簡單框架 css框架：http://aliceui.org/ js框架：http://aralejs.org/ 此爲阿里的前端框架 優點是上手快，開發起來也很方便，很多現成的代碼直接拿過來用。功能語句一眼就能看明白。 缺點是

nathanhuang1220 2020-07-01 11:44:04

Js之AJAX簡易封裝

提供對原生ajax的簡易封裝 /* * 封裝ajax庫 * author: wenqian * email: [email protected] */ (function() { /* * 創建 XMLH

echone_wenqian 2020-06-19 22:56:38

Axios使用手冊

簡介 Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。 Features 從瀏覽器中創建 XMLHttpRequests 從 node.js 創建 http 請求 支持 Pro

echone_wenqian 2020-06-19 21:24:56

在Windows平臺上安裝Node.js及NPM模塊管理

songxiaojun1 2020-02-24 06:05:05

node.js入門

songxiaojun1 2020-02-24 06:05:05

1.初識backbone.js

nathanhuang1220 2020-02-22 14:36:07

sea.js簡單的調用

nathanhuang1220 2020-02-22 14:35:56

lhgdialog學習

iteye_13111 2020-02-22 12:32:08

JS常用

echone_wenqian 2020-02-22 09:34:03

前端學習總結（二十三）——前端框架天下三分：Angular React 和 Vue的比較

poptxz 2020-02-20 20:41:33

extJs中常見的錯誤

iteye_1944 2020-02-20 14:13:33

ajax請求時間、數據加載

iteye_1944 2020-02-20 14:13:33

TabPanel、TreePanel、GridPanel幾種佈局方式常見的小問題

iteye_1944 2020-02-20 14:13:33