003-EasyUI框架

宁静@星空

已于 2024-10-08 18:14:15 修改

阅读量457

点赞数 4

分类专栏：前端知识点文章标签： easyui 前端 javascript

于 2024-10-08 18:10:56 首次发布

本文链接：https://blog.csdn.net/xiaogang1226/article/details/142764513

版权

EasyUI框架

一、基本操作
- - - - 001.隐藏table中的输入框
        
        002.输入框赋值-取值
        
        003.布局
        
        004.弹窗
        
        005.置灰与只读
        
        006.清空表单
        
        007.查询下拉选
        
        008.手动设置下拉
        
        009.Ajax请求
        
        010.图标使用
        
        011.显示与隐藏
        
        012.日期格式化
        
        013.输入框属性设置
        
        014.为空判断
        
        015.自定义验证扩展
二、数组操作
- - - - 1.在数组后添加数据
三、树操作
- - - - 1.创建一个树
        
        2.去除树前面的图标和设置复选框不可选
四、走马灯案例
- - - - 1.控制向左或向右
        
        2.案例2
        
        3.经典版
        
        4.一般模式（卡）
        
        5.带入鼠标模式

一、基本操作

001.隐藏table中的输入框

<td style="display: none">
    <input style="width:200px;" class="easyui-textbox" type="text" name="type"
           id="in_inspect_year_type">
    <input style="width:200px;" class="easyui-textbox" type="text" name="inspectionChannel"
           value="${inspectionChannel}"
           id="in_inspect_year_inspectionChannel">
</td>

002.输入框赋值-取值

-- textbox：文本框
    <td><input class="easyui-textbox" type="text" name="code" id="in_code1" style="width: 200px;"></td>
        赋值：$("#in_code1").textbox('setText', "");
        取值：$("#in_code1").textbox('getText').trim();
    
-- combobox：下拉选
    <td class="t_title">合同店铺名称</td>
    <td>
        <input id="in_shop_name1" name="licenseId" class="easyui-combobox"
               data-options="prompt:'请选择合同店铺名称',valueField:'licenseId',textField:'shopName',panelHeight:'auto',panelMaxHeight: '113'"
               style="width:200px;"/>
    </td>
    
    <td class="t_title">检测状态</td>
    <td>
        <select class="easyui-combobox" data-options="panelHeight:'auto'" name="thirdPartyInspectionStatus"
                id="in_thirdParty_inspection_status1" style="width: 200px;">
            <option value="">全部</option>
            <option value="1">未检测</option>
            <option value="2">已检测</option>
        </select>
    </td>
    
    赋值：$("#in_thirdParty_inspection_status1").combobox('setValue', "");
    取值：$("#in_thirdParty_inspection_status1").combobox('getValue').trim();
    
-- 时间：datetimebox
    <input class="easyui-datetimebox" data-options="editable:false," name="createTimeStart"
           id="in_create_time_start1" style="width: 150px;">
    至
    <input class="easyui-datetimebox" data-options="editable:false," name="createTimeEnd"
           id="in_create_time_end1" style="width: 150px;" validType="end">
    
    <td class="t_title">操作时间</td>
    <td><input class="easyui-datetimebox" data-options="editable:false," readonly="readonly"
               name="operateDate" id="in_rfid_operateDate" value="${createTime}"
               style="width: 200px;">
               
    赋值：$("#in_create_time_start1").datetimebox("setValue", "");
    取值：$("#in_create_time_start1").val();
    
-- 日期：datebox
    <td align="right" >最后出场时间:</td>
    <td colspan="3" style="text-align: left">
        <input class="easyui-datebox"  data-options="editable:false," id="instock_lastOutTimeStart"
               name="lastOutTimeStart" style="width: 150px;">
        至 <input class="easyui-datebox"  data-options="editable:false," id="instock_lastOutTimeEnd"
                 name="lastOutTimeEnd"  style="width: 150px;">
                 
    <td class="t_title">操作时间</td>
    <td><input class="easyui-datebox" data-options="editable:false," readonly="readonly"
               name="operateDate" id="in_rfid_operateDate" value="${createTime}"
               style="width: 200px;">
    
    赋值：$("#in_create_time_start1").datebox("setValue", "");
    取值：$("#in_create_time_start1").val();

003.布局

<div data-options="region:'north'" style="overflow:hidden;">

<div data-options="region:'center'">
    
    <div class="easyui-layout" data-options="fit:true">
        
        <div id="tool-bar" data-options="region:'north'" style="height: 30px">
        
        <div data-options="region:'center'">

004.弹窗

<html>
<style>
    #purchaseSalesStock_query_dialog td {
     
        height: 40px;
        min-width: 100px;
    }

    #purchaseSalesStock_query_dialog .t_title {
     
        text-align: right;
        padding-right: 5px;
    }
</style>

<div class="easyui-dialog" title="高级查询" modal="true" closed="true" data-options="width:700,height:260"   
     id="purchaseSalesStock_query_dialog">
    <form id="purchaseSalesStock_searchForm" style="margin: 10px">
        <table style="margin: 10px">
            <tr>
                <td class="t_title">所属公司</td>
                <td>
                    <input id="in_company_rfid_id1" name="companyId" class="easyui-combobox" type="text"
                           data-options="prompt:'请选择公司',panelHeight:'auto',panelMaxHeight: '113'" style="width:200px;"/>
                </td>
                <td class="t_title">所属市场</td>
                <td>
                    <input id="in_market_rfid_id1" name="marketId" class="easyui-combobox"
                           data-options="prompt:'请选择所属市场',valueField:'marketId',textField:'marketName',panelHeight:'auto',panelMaxHeight: '113'"
                           style="width:200px;"/>
                </td>
            </tr>

            <tr>
                <td class="t_title">类型</td>
                <td>
                    <select class="easyui-combobox" data-options="panelHeight:'auto'" name="type"
                            id="in_type_status1" style="width: 200px;">
                        <option value="">全部</option>
                        <option value="0">消耗</option>
                        <option value="1">采购</option>
                    </select>
                </td>
                <td class="t_title">易碎贴类型</td>
                <td>
                    <select class="easyui-combobox" data-options="panelHeight:'auto'" name="rfidType"
                            id="in_rfidType_status1" style="width: 200px;">
                        <option value="">全部</option>
                        <option value="1">临时授权车（一次性）</option>
                        <option value="2">临时授权车（永久）</option>
                        <option value="4">商品车</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td class="t_title">操作时间</td>
                <td colspan="4"><input class="easyui-datebox" data-options="editable:false,"
                                       name="createTimeStart" id="in_createTimeStart_start1"
                                       style="width: 200px;">
                    至 <input class="easyui-datebox" data-options="editable:false," name="createTimeEnd"
                             id="in_createTimeEnd_end1"
                             style="width: 200px;" validType="end">
                </td>
            </tr>

            <tr>
                <td class="t_title">操作人</td>
                <td><input class="easyui-textbox" type="text" name="operatorName" id="in_operatorName"
                           style="width: 200px;"></td>