【EasyUI】EasyUI中的一些js处理_easyui js-优快云博客

本文详细介绍了EasyUI框架中的一些JavaScript处理技巧，包括datagrid的刷新、复选框实现、选中状态管理、form表单的操作、窗口与对话框的控制，以及与后台的数据交互等，为使用EasyUI的开发者提供了实用的操作示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、easyui中datagrid刷新

$('#aa1').datagrid('reload');

二、datagrid复选框

对datagrid添加复选框，从而进行批量操作。

<table id="aa1" class="easyui-datagrid"
               data-options="
            checkbox:true,    //添加复选框
            method:'get',
            border:false,
            singleSelect:false,    //可以多行选中
            idField :'teacherNo',   //解决跨页选中问题
            collapsible:false,
            pagination:true">
            <thead>
            <tr>
                <th data-options="field:'cb',align:'center',width:'110px',checkbox:'true'"></th>
                <th data-options="field:'teacherNo',align:'center',width:'110px'">工号</th>
                <th data-options="field:'teacherName',align:'center',width:'80px'">姓名</th>
            </tr>
            </thead>
        </table>

三、取消datagrid选中状态

$('#aa1').datagrid('clearSelections');

四、datagrid选中一行或多行

单行选中：var row = $('#ttd1').datagrid('getSelected');
多行选中：var rows = $('#aa1').datagrid('getSelections');

rows.length用来选取用户选中了几行
row.属性  rows[i].属性  可以获取用户选中某行中的一个属性值

五、window/dialog的显示与隐藏

$('#window3').window('open');
$('#modifydg1').dialog('close');

//默认隐藏
<div id="modifydg" class="easyui-dialog"  closed="true"></div>

六、form表单内容清空与加载

$('#ff').form('clear');

//form表单内容加载
$('#fim').form('load',row);将选中行的信息展示在form中，修改信息功能时用的比较多

七、combobox/textbox获取值以及赋值

//赋值
$("#win7").combobox('setValue', "Hello");
$("#win7").combobox('getValue');

//获取值
$('#title').textbox("getValue")；
$("#title").textbox('setValue','外星人')；

//获取上传的文件的名字
var filename=$('#uploadFile').filebox('getValue');

//combobox恢复默认值，显示第一条
$("#qualifyItem option:first").prop("selected", 'selected');

八、message框

$.messager.confirm('My Title', 'Are you confirm this?', function(r){
                if (r){
                    alert('confirmed: '+r);
                }
})

九、datagrid向后台传递参数

$('#aa1').datagrid({
    url: '/getenchange_infomation1',
    queryParams:{
        train_no:train_no
    },
    method: 'get',
    border: false,
    singleSelect: false,
});

十、js校验是否为整数

var modifyHours=document.getElementById("modifyHours").value;
isNaN(modifyHours)

十一、汉化

easyui分页汉化引入以下js直接达到汉化easyui-lang-zh_CN.js
无须写js函数处理汉化，例如分页功能

十二、解析问题

js有时候会将小于号解析为尖括号<

解决方法如下所示：   
//<![CDATA[
    function enterenchangeveritysome() {

    }
//]]>

十三、多表头设置

<table id="ddg1" class="easyui-datagrid"
               data-options="
               url:'/entrytrain_info',
               method:'get',
               border:false,
               singleSelect:true,
               fit:true,
               collapsible:false,
               pagination:true,
               pageSize:30,
               pageList:[10,30,50,70,100],
               fitColumns:true">
            <thead>
            <tr>
                <th data-options="rowspan:2,field:'year',align:'center'">培训年份</th>
                <th data-options="rowspan:2,field:'tno',align:'center',width:'7%'">工号</th>
                <th data-options="rowspan:2,field:'tname',align:'center'">姓名</th>
                <th data-options="rowspan:2,field:'gender',align:'center',width:'4%'">性别</th>
                <th data-options="rowspan:2,field:'age',align:'center'">年龄</th>
                <th data-options="rowspan:2,field:'work_unit',align:'center'">工作单位</th>
                <th data-options="colspan:3,align:'center'">校本文化</th>
                <th data-options="colspan:3,align:'center'">素质拓展</th>
            </tr>
            <tr>
                <th data-options="field:'campus_start',align:'center',width:'7%'">开始时间</th>
                <th data-options="field:'campus_end',align:'center',width:'7%'">结束时间</th>
                <th data-options="field:'campus_grade',align:'center',width:'4%'">成绩</th>
                <th data-options="field:'quality_start',align:'center',width:'7%'">开始时间</th>
                <th data-options="field:'quality_end',align:'center',width:'7%'">结束时间</th>
                <th data-options="field:'quality_grade',align:'center',width:'4%'">成绩</th>
            </tr>
            </thead>
        </table>

十四、datagrid嵌套子表格

$('#dg1').datagrid({
                        url: '/getStatisticDataGridList',
                        method: 'get',
                        border: false,
                        pagination: true,
                        pageSize:30,
                        pageList:[10,30,50,70,100],
                        fitColumns: true,
                        //以下代码为嵌套子表格
                        //需要引入datagrid-detailview.js文件
                        view: detailview,
                        detailFormatter:function(index,row){
                            return '<div style="padding:2px"><table class="ddv"></table></div>';
                        },
                        onExpandRow: function(index,row){
                            var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                            ddv.datagrid({
                                url:'getEchartsDetailInfo',
                                method: 'get',
                                border: true,
                                fitColumns:true,
                                singleSelect:true,
                                rownumbers:true,
                                pagination: true,
                                pageSize:20,
                                pageList:[10,20,30,40],
                                loadMsg:'加载中，请稍后...',
                                height:'auto',
                                columns:[[
                                    {field:'traintype',title:'培训类型',width:200},
                                    {field:'trainNo',title:'培训编号',width:200},
                                    {field:'teacherNo',title:'教师工号',width:200},
                                    {field:'teacherName',title:'教师姓名',width:200},
                                    {field:'workUnit',title:'工作单位',width:200},
                                    {field:'teacherAge',title:'教师年龄',width:200},
                                    {field:'teacherTitle',title:'教师职称',width:200},
                                    {field:'educationBackground',title:'教师学历',width:200},
                                    {field:'teacherDegree',title:'教师学位',width:200}
                                ]],
                                onResize:function(){
                                    $('#dg1').datagrid('fixDetailRowHeight',index);
                                },
                                onLoadSuccess:function(){
                                    $('#dg1').datagrid('fixDetailRowHeight',index);
                                }
                            });
                            $('#dg1').datagrid('fixDetailRowHeight',index);
                        }
                    })

十五、后台接收前台参数

String tno = request.getParameter("tno");


如果是采用form表单提交
采用request.getParameter("name")；采用某个的name值

如果是采用ajax提交
采用request.getParameter("id")；采用某个的id值