easyui 常用操作使用手册

最新推荐文章于 2024-09-15 16:35:16 发布

MoShaoBBC

最新推荐文章于 2024-09-15 16:35:16 发布

阅读量706

点赞数

分类专栏： easyui 文件上传文章标签： easyui jquery javascript java

本文链接：https://blog.csdn.net/qq_34545939/article/details/108517677

版权

easyui 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

文件上传

2 篇文章 0 订阅

订阅专栏

1，盒子标签属性 <div> <tr> <td>等

//设置不显示
<td id = "content" style="display: none">内容</td>

//js方法
//隐藏
$('#content').hide();
//展示
$('#content').show();

2，按钮文案设置，“可用”、“不可用”状态设置

//按钮html
<td> <a href="#" id="wwx" class="easyui-linkbutton" onclick="onlySave()">保存</a></td>

//设置按钮文案
$('#calcUserG').linkbutton({text:"计算"});
//设置按钮可点击
$('#calcUserG').linkbutton('enable');
//设置按钮不可点击(置灰)
$('#calcUserG').linkbutton('disable');

3，表单清除

//清除表单id为xxxFrom的表单内空间值
$('#xxxFrom').form('clear');

4，easyui-textbox、easyui-combobox 取值，赋值，下拉列表不可修改

//根据id获取值
var xxx= $("#q-xxx").textbox('getValue');
//根据id赋值
$("#q-xxx").textbox('setValue','123');
//设置只读属性
$('#xxx').textbox('readonly',false);	// 禁用只读模式
//遍历所有name属性为不可选
$("input[name='planTypeTime']").each(function(){
        $(this).attr("disabled",true);
    });

//获取下拉列表的value
var branchCode = $("#ccc").combobox('getValue');
//反显列表，select会触发onSelect方法
$('#xxx').combobox('select',result.rows[0].tplCode);
//设置值
$('#xxx').combobox('setValue',result.rows[0].tplCode);
//不能修改
$('#xxx').combobox({disabled: true});

5，动态生成combobox组件并选择

//根据返回结果动态生成某选项
    var newjson = [];
        var typeName;
        if(row.type == 'A'){
            typeName = '人工';
        }else if(row.type == 'B'){
            typeName = '手动';
        }else if(row.type == 'C'){
            typeName = '自动';
        }
        newjson.push({"typeId":row.type,"typeName":typeName});
        //debugger;
        $('#useGroupType').combobox({
            data:newjson,
            panelHeight: 'auto',
            width:250,
            editable:false,
            valueField: 'typeId',
            textField: 'typeName'
        });

6，textbox的data-option选项根据url请求后台

//请求后台，onSelect方法 valueField为值字段，会从返回的数据中code取，textField为选项展示的名称
<input id="branchCode" class="easyui-combobox" name="branchCode" style="width:170px;"
                               data-options="valueField:'code',textField:'text',required:true,editable:true,
                               onSelect:function(rec) {
                               $('#q-xxx').combobox('clear');
                               var url = 'xxx/zzz.htm' + rec.code;
                               $('#q-xxx').combobox('reload', url);
                               },
                               url:'xxx/yyy.htm'"/>

7，radio动态赋值

//根据name取出radio的组，然后根据value属性，选择某个单选按钮,planType为变量
$("input[name='xxx'][value="+planType+"]").get(0).checked=true;

8，ajax请求后台后去数据，并动态生成combobox

//获取人组下拉列表
function  selectUserGroupList() {
    var url = '/userGroup/xxx.htm';
    $.ajax({
        type: 'POST',
        url: url,
        cache: false,
        dataType: "json",
        beforeSend: function (XMLHttpRequest) {
            //TODO before
        },
        success: function (result) {
            // console.log(result.rows);
            if (result.rspCode == "000000") {
                // console.log(result);
                $('#userGroupId').combobox({
                    valueField: 'id',
                    textField: 'name',
                    data: result.rows
                });
            }
        }
    });
}

9，ajax请求后台，使用json参数

$.ajax({
        url:'/userGroup/ttt.htm',
        type:'post',
        dataType:'json',
data:"aCondition="+JSON.stringify(allDatas)+"&userGroupId="+ugId+"&wcFansStatus="+wcFansStatus+"&name="+ugroupName+"&remark="+remark+"&type="+type,
        success:function(result){
            //成功逻辑
        },
        error:function (result) {
            //失败逻辑
        }
    });

10，构造数组，并转成json，最后以json格式ajax提交

//创建数组
var components = [];
//为某元素赋值
var component = {};
    component['fundId'] = rows[i].fundId;
    component['fundName'] = rows[i].fundName;
    component['rate'] = rows[i].rate;
    component['targetRate'] = rows[i].targetRate;
//将元素提交到数组中
    components.push(component);
//转成json
var componentsJson = JSON.stringify(components)



//封装数据，请求后台
        var paramJson = {}
        paramJson.strategyId = strategyId;
        paramJson.transferDate = transferDate;
        paramJson.transferDesc = transferDesc;
        paramJson.branchCode = branchCode;
        paramJson.componentsJson = componentsJson;

        $.post("/adfof/wxr.htm", paramJson,
                function (data) {
                    console.log(data)
                    if (data.code == "000000") {
                        $.messager.alert("提示", "操作成功!");
                        closeDlg();
                        submitFofQuery();
                    } else {
                        $.messager.alert("提示", data.message);
                    }
                }, "json");

11，combobox的onChange事件

//xxx为combobox控件的id    
$("#xxx").combobox({
        onChange:function (nv, ov) {
            //nv 新值 ov 旧值
        }

    });

12，根据按钮或者链接打开一个弹窗，并请求后台，显示列表数据

//列表中的按钮或链接
<td id="pushHistory"><a href="#" onclick="queryPushHis()">推送记录</a></td>

//弹窗的<div>
<div id="pushHistory" class="easyui-dialog" title="历史推送记录" style="width:700px;height:350px;padding:10px"
     data-options="closed:true,draggable:true,resizable:true,modal:true,top:300">
    <table id="pushHistoryTable"  class="easyui-datagrid" style="width:auto;height:300px;"
           data-options="singleSelect:true,pagination:true,pageSize:10,autoRowHeight:true,collapsible:false,rownumbers:true">
        <thead>
        <tr>
            <th data-options="field:'batchNo',width:80,align:'center'">推送批次号</th>
            <th data-options="field:'pushTime',width:180,align:'center'">推送时间</th>
            <th data-options="field:'totalNum',width:80,align:'center'">推送总人数</th>
            <th data-options="field:'successNum',width:80,align:'center'">推送成功人数</th>
            <th data-options="field:'failNum',width:180,align:'center'">推送失败人数</th>
        </tr>
        </thead>
    </table>
</div>

//事件方法，请求后台
function queryPushHis() {
        var planId = saveSuccPlanId;
        $.post("/wechatPush/xxy.htm", {planId: planId,condition:"planTask"}, function (data) {
            if (data) {
                if(data.rspCode == '000000'){
                    var rows = data.rows;
                    $('#pushHistoryTable').datagrid('loadData',rows);
                }else{
                    $.messager.alert("提示",data.respMsg+" 错误代码："+data.respCode);
                    return;
                }
            }
        }, 'json');
        $('#pushHistory').dialog('open');
    }

13，创建radio，设置onchange事件

<tr>
    <td>
推送类型
    <input name="planTypeRadio" type="radio" value="01" onchange="xx(this)"/>一次性
    <input name="planTypeRadio" type="radio" value="02" onchange="xx(this)"/>
循环推送，间隔<input id="naturalDay" name="naturalDay" style="width:30px" type="text" class="easyui-textbox"/>个自然日触发
    </td>
</tr>

//根据value值，设置选择某个radio
$("input[name='planTypeRadio'][value="+planType+"]").get(0).checked=true;

14，文件上传，通过from提交

//列表
<div id="uploadUserIdDlg" class="easyui-dialog" title="上传UID" style="padding:10px;"
     data-options="closed:true,draggable:true,resizable:true,modal:true,top:180,buttons:'#uploadButton'">
        <form id="uploadFormTable" method="post" enctype="multipart/form-data">
            <table cellpadding="2" style="padding: 20px 30px ">
                <tr>
                    <td>人组名称:</td>
                    <td>
                        <input id="ugroupNameByFile" name="ugroupNameByFile" style="width: 150px" type="text"
                               class="easyui-textbox" required="required"
                               data-options="validType:'length[0,20]'"/>
                    </td>
                </tr>
                <tr>
                    <td>文件上传：</td>
                    <td class="intoUserGroup">
                        <input class="easyui-filebox" required="required" type="text" id="files" name="files"
                               data-options="width:150"/>
                    </td>
                </tr>
                <tr id="addTips">
                    <td></td>
                    <td><span>提示：仅支持登陆用户ID上传，第一行须作为标题行</span></td>
                </tr>
            </table>
        </form>
</div>

//保存
function  saveUploadUid() {
    if(!$('#uploadFormTable').form('validate')){
        $('#saveUploadUid').linkbutton("enable");
        return;
    }
    //保存接口
    var ugroupName = $('#ugroupNameByFile').textbox('getValue');
    //上传UID类型为人工上传
    var type = "2";
    //保存接口
    $("#uploadFormTable").form('submit', {
        url: '/userGroup/ssss.htm',
        onSubmit: function (param) {
            param.name = ugroupName;
            param.type = type;
        },
        success:function(result){
            //debugger;
            $('#saveUploadUid').linkbutton('enable');
            afterSuccess(result);
        },
        error:function (result) {
            $('#saveUploadUid').linkbutton('enable');
        }
    });
}