首页手记前端框架 jQuery EasyUi...

前端框架 jQuery EasyUi 学习笔记二（两种绑定事件的方法）

标签：

Java JQuery JavaScript

002.jsp 代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>EasyUi</title>
<!--引入JQuery文件 -->
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-easyui-1.4.4/jquery.min.js"></script>
<!--引入EasyUI文件 -->
<script type="text/javascript"
    class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!--引入EasyUI本地化汉语支持文件 -->
<script type="text/javascript"
    class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<!--引入默认CSS文件 -->
<link type="text/css" rel="stylesheet"
    href="jquery-easyui-1.4.4/themes/default/easyui.css" />
<!--引入默认图片CSS文件 -->
<link type="text/css" rel="stylesheet"
    href="jquery-easyui-1.4.4/themes/icon.css" />

<script type="text/javascript">

$('#cc').combobox({
    url: ...,
    required: true,
    valueField: 'id',
    textField: 'text'
});

    </script>

</head>

<body>

    <input class="easyui-combobox" name="language"
        data-options="    
            url:'combobox_data.json',    
            valueField:'id',    
            textField:'text',    
            panelHeight:'auto',    
            onSelect:function(record){    
                alert(record.text)    
            }" />

    <input id="cc" style="width:200px" />

</body>
</html>

展示效果如图；