easyUi：其他插件的使用

qq_35119207

已于 2022-09-16 13:49:32 修改

阅读量390

点赞数

分类专栏： easyUI 文章标签： easyui 前端 javascript

于 2022-09-16 13:48:34 首次发布

本文链接：https://blog.csdn.net/qq_35119207/article/details/126888943

版权

easyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2、面板 Panel

使用面板，有2种使用方式

方式1、基于html标签+类名（easyui-样式名）  这里为  <div class='easyui-panel'></div>
方式2、使用js代码，来实现
	$("要操作的标签，这里是jquery").插件方法();  这里为 $("div").panel();

面板的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9eNP91QZ-1663306942956)(图片/image-20210718213642840.png)]

注意事项：

1.面板一般是放在div标签中，来实现的

案例演示

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo2</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <!--
        写法1：通过html+ data-options属性的方式，来实现
        面板常用的属性：
        title：面板的标题
        iconCls:面板标题左边的图标
     -->
<div class="easyui-panel" data-options="title:'我是标题',iconCls:'icon-man'">这是一个面板</div>

<!-- 
  写法2、通过js代码，来实现panel
 -->
<div id="p1">这个第二个panel</div>

<!-- 自定义一个按钮 -->
<div id="tt">
    <a href="#" class="easyui-linkbutton"  data-options="iconCls:'icon-man',size:'small',width:'20',height:'20'"></a>
</div>
</body>
<script>
    // 写法2：通过js代码，生成一个panel插件
  $("#p1").panel({
    title:'我是标题',  //标题
    iconCls:'icon-man', //图标
    width:400,  //panel的宽度
    height:600,   //panel的高度
    collapsible:true, //添加 可折叠按钮
    maximizable:true, //添加 放大按钮
    closable:true , ///添加 关闭按钮
    tools:'#tt', //绑定按钮组  作用：给面板中，添加自定义的按钮,这里写的是自定义按钮的id
    href:'qiantao.html/'  //href:用于引用其他页面的内容------注意这里写的是，目标页面，完整的url路径
  });
</script>
</html>

qiantao.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>panel 窗口中，要显示的页面</title>
</head>
<body>
    <table border="1" align="center">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>手机号</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>18</td>
            <td>1</td>
            <td>135464646</td>
            <td>xx</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>18</td>
            <td>1</td>
            <td>135464646</td>
            <td>xx</td>
        </tr>
    </table>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xUQObcBX-1663306942958)(图片/image-20210719171437471.png)]

3、窗口 window

存放的标签为：div

样式名：easyui-window

插件方法名：window()

注意：

1、easyUI中的window，它继承了panel,因此panel 中所有的属性、方法、事件， window都可以直接拿来使用

案例演示

demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo3--window</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <!-- 3、使用js的方式，来使用window窗口 -->
 <div>
     <div id="d1">长时代峻峰散列计算长时代峻峰散列计算长时代峻峰散列计算长时代峻峰散列计算</div>
 </div>

 <!-- 4.1、定义一个按钮组 -->
 <div id="tt1">
     <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a>
     <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"></a>
</div>
</body>
<script>
    // 4、window常用的一些属性
  $("#d1").window({
      title:'新闻',
      widht:400,
      height:200,
      iconCls:'icon-man',
      url:''  ,//引用其他页面----这些都是panel中存在的，window可以直接拿来使用
      modal:true, //灯罩效果-----除了本窗口，其他都变灰色了，并且不能够点击
      draggable:false,// 表示窗口，是否可拖拽【默认为true，表示可拖拽】----false:表示，不可以拖拽
      tools:'#tt1'
  });
</script>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6Y9Equh-1663306942959)(图片/image-20210718223554714.png)]

4、对话框 dialog

存放的标签为：div

样式名：easyui-dialog

插件方法名：dialog()

案例演示

dialog的常用属性，并使用dialog画了一个登录页面

注意：legend标签，是给form表单，添加一个文字说明------------------------挺好看的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>

<!-- 定义一个按钮组 -->
 <div id="tt1">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"></a>
</div>
<!-- 定义一个底部按钮组 -->
<div id="tt2">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man'">登录</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
</div>
<!-- 登录表单 -->
<!-- 1、先定义一个dialog,使用js的方式 id="dl"-->
<div id="dl">
     <form action="#">
         <fieldset>
             <legend>登录</legend>
             <!--  align="center" 让表格中的内容进行居中 -->
             <table align="center">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username" id="username"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text" name="password" id="password"></td>
                </tr>
            </table>
         </fieldset>
         
     </form>

</div>
</body>
<script>
    //注意：对话框继承了 window和linkbutton，因此他们的属性、方法、事件  它都可以直接用
    $("#dl").dialog({
        title:'用户登录', //标题
        width:400, //宽度
       // height:200, //高度  不写，默认高度就是自适应
        iconCls:'icon-man', //图标
        modal:true, //灯罩效果-----除了本窗口，其他都变灰色了，并且不能够点击
        //tools:'#tt1',  //引用按钮组----自定义工具菜单
        toolbar:'#tt1',// dialog对话框：特有的属性-------在对话框的上部，绑定一个按钮组【它是在窗口内部进行显示，更符合常理】
        buttons:'#tt2',//在dialog对话框底部，绑定一个按钮组

    })
</script>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cnfaYTyH-1663306942960)(图片/image-20210719214813953.png)]

5、消息框 messager 【常用】

核心：继承window、linkbutton的所有属性

应用：用户操作完毕之后的提示

使用方式：
            消息框
                    $.message.show({
                     属性名:值,
                     属性名:值,
                     ....
                    })


            提示框
                    $.message.alert({
                     属性名:值,
                     属性名:值,
                     ....
                    })


            确认框
                    $.message.confirm({
                     属性名:值,
                     属性名:值,
                     ....
                    })

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>
    <!-- 消息框：它是一个动画效果，会自动的显示，并隐藏 -->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok',onClick:test1">测试消息框</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',onClick:test2">测试提示框</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man',onClick:test3">测试确认框</a>

</body>
<script>
// 显示 消息框
function test1(){
    $.messager.show({
        title:'操作提示', //message:设置标题
        showSpeed:1000,  //设置消息框，显示的时间【几毫秒内，就显示出 消息框】
        timeout:3000,//显示后，停留时间---3000表示停留3秒
        showType:'fade',//设置 消息框 消失的过渡效果 【默认是slide效果】
        msg:'您的余额不足' //设置消息框中的，提示信息
    });
}
//显示 提示框【也叫“警告框”】
function test2(){
    $.messager.alert({
       
        msg:'您的余额不足', //设置提示框中的，提示信息
        title:'标题', //设置提示框中的标题
        icon:'error', //提示框中的图标  具体的取值，看文档
        fn:function(){
            //点击提示框中的 确定  按钮 之后，才会  调用该函数
            console.log("窗口关闭了")
        }
    });
}
//显示 确认框
function test3(){
    $.messager.confirm({
       
        msg:'真的要分手吗？', //设置确认框中的，提示信息
        title:'警告', //设置确认框中的标题
        fn:function(arg){ //用户点击 “确定” 或者 “取消” 按钮后，会调用该函数
            console.log(arg)  // 点击确定，传过来的就是true；否则就是false
        }
    });
}
</script>
</html>

消息框的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yqDettDB-1663306942961)(图片/image-20210719225050277.png)]

提示框的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NBvbfnHj-1663306942961)(图片/image-20210719225213377.png)]

确认框的效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7HX7IPWA-1663306942962)(图片/image-20210719225238728.png)]

6、Form表单相关的

6.1、文本输入框 textbox

html标签：input:text

easyui插件方法：textbox()

输入框中常用的方法：
function testMethod(){
 //获取文本内容
var username= $("#username").textbox('getValue');
//填充文本内容
$("#username").textbox('setValue','设置后的值123123');
//验证是否已经通过验证
var r= $("#username").textbox('isValid');

//、清空输入框中的数据
$('#keyword').textbox('clear');
}

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>
<form action="#">
    用户名：<input type="text" name="username" id="username">
    <br>
    自我介绍：<input type="text" name="myself" id="myself">
    <br>
    搜索：<input type="text" name="keyword" id="keyword">
    <br>
    <input type="submit" value="提交">
</form>

</body>
<script>
// textbox插件：将input输入框，变成easyUI提供的input输入框---------js写法
 $("#username").textbox({
    required:true, //输入框内容必须填写  ：作用，用户必须给输入框输入数据，否则，输入框爆提示信息
    missingMessage:"用户名不能为空",//输入框为空时的，提示文字信息  missingMessage与required配套使用
    /**
    validType校验规则，它内置了一些规则 ：url(指必须是网络地址，否则报错) 、 email（）、 length[min,max]  校验最小长度，最大长度
    有2种情况：
        情况1、如果验证规则只有一个，可以给值  字符串：内置url(指必须是网络地址，否则报错) 、 email（）、 length[min,max]  校验最小长度，最大长度
        情况2、如果验证规则有多个值，可以给个数组
    */
    validType:['email','lenght[20,30]'], //指定验证规则，这里是必须为邮箱地址，并且字符要在20到30个字符直接，否则报提示信息
    invalidMessage:"用户名长度必须为12到20字符!",//当用户输入的不符合验证规则，报的提示信息 与validType属性，配套使用
    readonly:true,//内容是只读的，输入框的信息，不让用户修改
    type:"text",
    
    prompt:'请输入用户名'
 }  
 );

 //easyUI可以将一个input的输入框，变成一个textarea的效果
 $("#myself").textbox({
    multiline:true,//是否是多行
    width:200,
    height:100
 })
  //搜索框
  $("#keyword").textbox({
    buttonText:"搜索",//显示一个按钮，并指定按钮的文字
    buttonIcon:"icon-search", //设置输入框按钮，上的图标
    required:true, //设置输入框，用户输入的信息必须有，否则搜索框变红
    onClickButton:function(){ //给搜索框上的按钮，绑定单击事件---------演示如何绑定事件，常用方法的使用
        alert("按钮被点击了")
        //方法1、获取输入框中的值
        var v=$('#keyword').textbox('getValue');
        console.log(v)
        //方法2、清空输入框中的数据
        //$('#keyword').textbox('clear');
        //方法3、判断输入框中的内容， 是否符合验证规则------true 表示，符合校验规则
        var boolean=$('#keyword').textbox('isValid');
       console.log(boolean)
    }
 })
</script>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fEC3KQ5C-1663306942963)(图片/image-20210724112340346.png)]

6.2、数字输入框 numberbox

应用场景：输入框只能输入数字，不能输入其他字符

标签：input:text

easyui插件方法：numberbox();

例如：

年龄：<input type="text" name="age" id="age">
<br>
价格<input type="text" name="price" id="price">
<br>

。。。。。。
$("#age").numberbox({
    precision:0,//默认小数点后保留2位---这里是保留0位小数，会自动的四舍五入
    min:18,//限定，用户所输入的最小值，这里用户输入的最小数字为18
    max:120,//限定，用户所输入的最大值，
 })
 $("#price").numberbox({
    precision:0,//默认小数点后保留2位---这里是保留0位小数，会自动的四舍五入
    min:18,//限定，用户所输入的最小值，这里用户输入的最小数字为18
    suffix:'￥',//输入的数字，默认追加的后缀符号----这里是字符串，可以指定增加任意符号
 })

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bVJs70Wt-1663306942963)(图片/image-20210724121020110.png)]

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>
<form action="#">
    用户名：<input type="text" name="username" id="username">
    <br>
    自我介绍：<input type="text" name="myself" id="myself">
    <br>
    年龄：<input type="text" name="age" id="age">
    <br>
    价格<input type="text" name="price" id="price">
    <br>
    生日：<input type="text" name="birth" id="birth">
    <br>
    搜索：<input type="text" name="keyword" id="keyword">
    <br>
    <input type="submit" value="提交">
</form>

</body>
<script>
// textbox插件：将input输入框，变成easyUI提供的input输入框---------js写法
 $("#username").textbox({
    required:true, //输入框内容必须填写  ：作用，用户必须给输入框输入数据，否则，输入框爆提示信息
    missingMessage:"用户名不能为空",//输入框为空时的，提示文字信息  missingMessage与required配套使用
    /**
    validType校验规则，它内置了一些规则 ：url(指必须是网络地址，否则报错) 、 email（）、 length[min,max]  校验最小长度，最大长度
    有2种情况：
        情况1、如果验证规则只有一个，可以给值  字符串：内置url(指必须是网络地址，否则报错) 、 email（）、 length[min,max]  校验最小长度，最大长度
        情况2、如果验证规则有多个值，可以给个数组
    */
    validType:['email','lenght[20,30]'], //指定验证规则，这里是必须为邮箱地址，并且字符要在20到30个字符直接，否则报提示信息
    invalidMessage:"用户名长度必须为12到20字符!",//当用户输入的不符合验证规则，报的提示信息 与validType属性，配套使用
    readonly:true,//内容是只读的，输入框的信息，不让用户修改
    type:"text",
    
    prompt:'请输入用户名'
 }  
 );

 //easyUI可以将一个input的输入框，变成一个textarea的效果
 $("#myself").textbox({
    multiline:true,//是否是多行
    width:200,
    height:100
 })
  //搜索框
  $("#keyword").textbox({
    buttonText:"搜索",//显示一个按钮，并指定按钮的文字
    buttonIcon:"icon-search", //设置输入框按钮，上的图标
    required:true, //设置输入框，用户输入的信息必须有，否则搜索框变红
    onClickButton:function(){ //给搜索框上的按钮，绑定单击事件---------演示如何绑定事件，常用方法的使用
        alert("按钮被点击了")
        //方法1、获取输入框中的值
        var v=$('#keyword').textbox('getValue');
        console.log(v)
        //方法2、清空输入框中的数据
        //$('#keyword').textbox('clear');
        //方法3、判断输入框中的内容， 是否符合验证规则------true 表示，符合校验规则
        var boolean=$('#keyword').textbox('isValid');
       console.log(boolean)
    }
 })
 //数字输入框--------其他属性，可看文档
 $("#age").numberbox({
    precision:0,//默认小数点后保留2位---这里是保留0位小数，会自动的四舍五入
    min:18,//限定，用户所输入的最小值，这里用户输入的最小数字为18
    max:120,//限定，用户所输入的最大值，
 })
 $("#price").numberbox({
    precision:0,//默认小数点后保留2位---这里是保留0位小数，会自动的四舍五入
    min:18,//限定，用户所输入的最小值，这里用户输入的最小数字为18
    suffix:'￥',//输入的数字，默认追加的后缀符号----这里是字符串，可以指定增加任意符号
 })
</script>
</html>

6.3、日期输入框 datebox

标签：input:text

easyui插件方法：datebox();

例子：
生日：<input type="text" name="birth" id="birth">
    <br>
----------------------------    
$("#birth").datebox({
    required:true, //必须选择，否则标红
    editable:false//用户不能手动输入日期
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C9YxYXhj-1663306942964)(图片/image-20210805153300721.png)]

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>
<form action="#">
    用户名：<input type="text" name="username" id="username">
    <br>
    自我介绍：<input type="text" name="myself" id="myself">
    <br>
    年龄：<input type="text" name="age" id="age">
    <br>
    价格<input type="text" name="price" id="price">
    <br>
    生日：<input type="text" name="birth" id="birth">
    <br>
    搜索：<input type="text" name="keyword" id="keyword">
    <br>
    <input type="submit" value="提交">
</form>

</body>
<script>
// textbox插件：将input输入框，变成easyUI提供的input输入框---------js写法
 $("#username").textbox({
    required:true, //输入框内容必须填写  ：作用，用户必须给输入框输入数据，否则，输入框爆提示信息
    missingMessage:"用户名不能为空",//输入框为空时的，提示文字信息  missingMessage与required配套使用
    /**
    validType校验规则，它内置了一些规则 ：url(指必须是网络地址，否则报错) 、 email（）、 length[min,max]  校验最小长度，最大长度
    有2种情况：
        情况1、如果验证规则只有一个，可以给值  字符串：内置url(指必须是网络地址，否则报错) 、 email（）、 length[min,max]  校验最小长度，最大长度
        情况2、如果验证规则有多个值，可以给个数组
    */
    validType:['email','lenght[20,30]'], //指定验证规则，这里是必须为邮箱地址，并且字符要在20到30个字符直接，否则报提示信息
    invalidMessage:"用户名长度必须为12到20字符!",//当用户输入的不符合验证规则，报的提示信息 与validType属性，配套使用
    readonly:true,//内容是只读的，输入框的信息，不让用户修改
    type:"text",
    
    prompt:'请输入用户名'
 }  
 );

 //easyUI可以将一个input的输入框，变成一个textarea的效果
 $("#myself").textbox({
    multiline:true,//是否是多行
    width:200,
    height:100
 })
  //搜索框
  $("#keyword").textbox({
    buttonText:"搜索",//显示一个按钮，并指定按钮的文字
    buttonIcon:"icon-search", //设置输入框按钮，上的图标
    required:true, //设置输入框，用户输入的信息必须有，否则搜索框变红
    onClickButton:function(){ //给搜索框上的按钮，绑定单击事件---------演示如何绑定事件，常用方法的使用
        alert("按钮被点击了")
        //方法1、获取输入框中的值
        var v=$('#keyword').textbox('getValue');
        console.log(v)
        //方法2、清空输入框中的数据
        //$('#keyword').textbox('clear');
        //方法3、判断输入框中的内容， 是否符合验证规则------true 表示，符合校验规则
        var boolean=$('#keyword').textbox('isValid');
       console.log(boolean)
    }
 })
 //数字输入框--------其他属性，可看文档
 $("#age").numberbox({
    precision:0,//默认小数点后保留2位---这里是保留0位小数，会自动的四舍五入
    min:18,//限定，用户所输入的最小值，这里用户输入的最小数字为18
    max:120,//限定，用户所输入的最大值，
 })
 $("#price").numberbox({
    precision:0,//默认小数点后保留2位---这里是保留0位小数，会自动的四舍五入
    min:18,//限定，用户所输入的最小值，这里用户输入的最小数字为18
    suffix:'￥',//输入的数字，默认追加的后缀符号----这里是字符串，可以指定增加任意符号
 })
 //--------------------------------------------日期输入框----------------------
 $("#birth").datebox({
    required:true, //必须选择，否则标红
    editable:false//用户不能手动输入日期
 })
</script>
</html>

补充：公司使用的方式【除了颜色，公司有它自己的那套，其他都一样】

//--------------------------------------------日期输入框----------------------
 $.fn.datebox.defaults.cleanText ='清空';
 
(function ($) {
    var buttons = $.extend([], $.fn.datebox.defaults.buttons);
    buttons.splice(1, 0, {
        text:function (target) {
            return $(target).datebox("options").cleanText
        },
        handler:function (target) {
            $(target).datebox("setValue","");
            $(target).datebox("hidePanel");
        }
    });
    $.extend($.fn.datebox.defaults, {
        buttons: buttons
    });
 
})(jQuery)

 $("#birth").datebox({
   // required:true, //必须选择，否则标红
    editable:false//用户不能手动输入日期
 })

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
  
</head>
<body>
<form action="#">
    生日：<input type="text" name="birth" id="birth">
    <br>
</form>

</body>
<script>
 //--------------------------------------------日期输入框----------------------
 $.fn.datebox.defaults.cleanText ='清空';
 
(function ($) {
    var buttons = $.extend([], $.fn.datebox.defaults.buttons);
    buttons.splice(1, 0, {
        text:function (target) {
            return $(target).datebox("options").cleanText
        },
        handler:function (target) {
            $(target).datebox("setValue","");
            $(target).datebox("hidePanel");
        }
    });
    $.extend($.fn.datebox.defaults, {
        buttons: buttons
    });
 
})(jQuery)

 $("#birth").datebox({
   // required:true, //必须选择，否则标红
    editable:false//用户不能手动输入日期
 })

</script>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZWJUslb-1663306942964)(图片/image-20210805152942302.png)]

6.4、文件选择框 filebox

html标签：input:text //普通的选择文件框，是input:file

easyui插件：filebox();

上传头像：<input type="text" name="file" id="file">
<br>

//--------------------------------------------文件输入框----------------------
$("#file").filebox({
    width:200,  //为了好看，可调试它的宽、高
    height:20,
    buttonText:'选择文件',//按钮的文字
    buttonIcon:'icon-save',//按钮的图标
});

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvxbZZPr-1663306942965)(图片/image-20210724133318412.png)]

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>
<form action="#">
    用户名：<input type="text" name="username" id="username">
    <br>
    自我介绍：<input type="text" name="myself" id="myself">
    <br>
    年龄：<input type="text" name="age" id="age">
    <br>
    价格<input type="text" name="price" id="price">
    <br>
    生日：<input type="text" name="birth" id="birth">
    <br>
    搜索：<input type="text" name="keyword" id="keyword">
    <br>
    上传头像：<input type="text" name="file" id="file">
    <br>
    <input type="submit" value="提交">
</form>

</body>
<script>
// textbox插件：将input输入框，变成easyUI提供的input输入框---------js写法
 $("#username").textbox({
    required:true, //输入框内容必须填写  ：作用，用户必须给输入框输入数据，否则，输入框爆提示信息
    missingMessage:"用户名不能为空",//输入框为空时的，提示文字信息  missingMessage与required配套使用
    /**
    validType校验规则，它内置了一些规则 ：url(指必须是网络地址，否则报错) 、 email（）、 length[min,max]  校验最小长度，最大长度
    有2种情况：
        情况1、如果验证规则只有一个，可以给值  字符串：内置url(指必须是网络地址，否则报错) 、 email（）、 length[min,max]  校验最小长度，最大长度
        情况2、如果验证规则有多个值，可以给个数组
    */
    validType:['email','lenght[20,30]'], //指定验证规则，这里是必须为邮箱地址，并且字符要在20到30个字符直接，否则报提示信息
    invalidMessage:"用户名长度必须为12到20字符!",//当用户输入的不符合验证规则，报的提示信息 与validType属性，配套使用
    readonly:true,//内容是只读的，输入框的信息，不让用户修改
    type:"text",
    
    prompt:'请输入用户名'
 }  
 );

 //easyUI可以将一个input的输入框，变成一个textarea的效果
 $("#myself").textbox({
    multiline:true,//是否是多行
    width:200,
    height:100
 })
  //搜索框
  $("#keyword").textbox({
    buttonText:"搜索",//显示一个按钮，并指定按钮的文字
    buttonIcon:"icon-search", //设置输入框按钮，上的图标
    required:true, //设置输入框，用户输入的信息必须有，否则搜索框变红
    onClickButton:function(){ //给搜索框上的按钮，绑定单击事件---------演示如何绑定事件，常用方法的使用
        alert("按钮被点击了")
        //方法1、获取输入框中的值
        var v=$('#keyword').textbox('getValue');
        console.log(v)
        //方法2、清空输入框中的数据
        //$('#keyword').textbox('clear');
        //方法3、判断输入框中的内容， 是否符合验证规则------true 表示，符合校验规则
        var boolean=$('#keyword').textbox('isValid');
       console.log(boolean)
    }
 })
 //数字输入框--------其他属性，可看文档
 $("#age").numberbox({
    precision:0,//默认小数点后保留2位---这里是保留0位小数，会自动的四舍五入
    min:18,//限定，用户所输入的最小值，这里用户输入的最小数字为18
    max:120,//限定，用户所输入的最大值，
 })
 $("#price").numberbox({
    precision:0,//默认小数点后保留2位---这里是保留0位小数，会自动的四舍五入
    min:18,//限定，用户所输入的最小值，这里用户输入的最小数字为18
    suffix:'￥',//输入的数字，默认追加的后缀符号----这里是字符串，可以指定增加任意符号
 })
 //--------------------------------------------日期输入框----------------------
 $("#birth").datebox({
    required:true, //必须选择，否则标红
    editable:false//用户不能手动输入日期
 })
//--------------------------------------------文件输入框----------------------
$("#file").filebox({
    width:200,  //为了好看，可调试它的宽、高
    height:20,
    buttonText:'选择文件',//按钮的文字
    buttonIcon:'icon-save',//按钮的图标
});
</script>
</html>

6.5 表单 form

事件：这里就说了onSubmit事件---------------------------【没用】

// 表单绑定onSubmit事件-------------------逻辑：在表单提交之前，执行该事件
 $("#fmPersonAdd").form({
     /**
         * 事件使用的格式：
         事件名:function(){}        
        */
        onSubmit:function(){   //onSubmit 在表单提交之前，执行该事件--------可用于，在表单提交之前，进行数据的校验
          alert("表单要提交了，之前")
         // return true; //允许提交表单
          return false; //禁止提交表单------- 它就不会执行 $("#fmPersonAdd").form("submit")，进行表单的提交
        }
    })

    //表单绑定success事件:在表单提交成功以后触发。
    $("#fmPersonAdd").form({
        success:function(data){   //data 接收后端返回的数据-------在表单提交成功后，接收后端接口，返回的数据【与表单提交时的点击事件，配套使用】 
           console.log(data)//注意：data为String类型，我们需要对他转为json
          var json= JSON.parse(data);
          if(json.code===200){
              location.href="index.html"  //跳转到 index.html页面
          }
        } 
    })

方法：这里说了3个方法

submit ：提交表单数据---------------注意：它会自动的判断，用户输入的数据，是否符合校验规则，符合才会发送请求，否则，就不发送
clear：清空表单数据
load：加载后端的数据，回显到表单中

//1、提交表单的方法
$("#fmPersonAdd").form("submit")      //采用异步提交
//2、清空表单数据的方法
$("#fmPersonAdd").form("clear")   
//3、数据回显---------将后端的数据，回显到form表单中
方式1、
    //模拟：从服务器端，获取到的数据
     var ps={"id":'1001','name':'池佳文','age':18,'sex':1,'tel':'12346789555','address':'fsfsdfsfs'}//将数据，回显到form表单中--------注意：这里严格要求，属性名要和 input的name属性值对应，否则加载不出来数据
    $("#fmPersonAdd").form("load",ps);  //将ps对象数据，加载到form表单中
方式2、
	$("#fmPersonAdd").form("load","url地址");  //从URL地址中，加载数据，回显到form表单中

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>
    <!-- 这个div，我们最终是通过easyUI将它变为一个窗口 -->
    <div id="frmdiv" style="text-align:  center;">
        <form action="localhost:8080/smarth" id="fmPersonAdd">
            <fieldset>
                <legend>添加客户信息</legend>
                <!--  align="center"让表格中的内容，全部进行居中 -->
                <table align="center">
                    <tr>
                        <td>姓名：</td>
                        <td>
                            <input type="text" name="name" id="name">
                        </td>
                    </tr>
                    <tr>
                        <td>年龄：</td>
                        <td>
                         <input type="text" name="age" id="age">
                        </td>
                    </tr>
                    <tr>
                        <td>性别：</td>
                        <td>
                         <input type="text" name="sex" id="sex">
                        </td>
                    </tr>
                    <tr>
                        <td>手机号：</td>
                        <td>
                         <input type="text" name="tel" id="tel">
                        </td>
                    </tr>
                    <tr>
                        <td>地址：</td>
                        <td>
                         <input type="text" name="address" id="address">
                        </td>
                    </tr>
                </table>
            </fieldset>
           
         </form>
         <!-- 按钮组 -->
         <!-- 表单中的添加按钮 -->
         <div id="addPersonBtn">
             <a href="#" class="easyui-linkbutton" data-options="onClick:person.add">添加</a>
             <a href="#" class="easyui-linkbutton" data-options="onClick:person.clear">清空</a>
             <a href="#" class="easyui-linkbutton" data-options="onClick:person.showUpdate">数据回显</a>
         </div>
    </div>


</body>
<script>
    // person相关的函数
    var person={
        add:function(){
           //将表单数据进行提交
           $("#fmPersonAdd").form("submit")
        },
        clear:function(){
           //将表单数据 清空
           $("#fmPersonAdd").form("clear")
        },
        showUpdate:function(){  //数据的回显------form表单
            //方式1、
            //从服务器端，获取到数据
            var ps={"id":'1001','name':'池佳文','age':18,'sex':1,'tel':'12346789555','address':'fsfsdfsfs'}
            //将数据，回显到form表单中--------注意：这里严格要求，属性名要和 input的name属性值对应，否则加载不出来数据
            $("#fmPersonAdd").form("load",ps);  //将ps对象数据，加载到form表单中
            
            //方式2、
            //$("#fmPersonAdd").form("load","http://写后端请求地址");  //将ps对象数据，加载到form表单中
        }
    }
    // 表单绑定onSubmit事件
    $("#fmPersonAdd").form({
        /**
         * 事件使用的格式：
         事件名:function(){}        
        */
        onSubmit:function(){   //onSubmit 在表单提交之前，执行该事件--------可用于，在表单提交之前，进行数据的校验
          alert("表单要提交了，之前")
         // return true; //允许提交表单
          return false; //禁止提交表单------- 它就不会执行 $("#fmPersonAdd").form("submit")，进行表单的提交
        }

    })
    //表单绑定success事件:在表单提交成功以后触发。
    $("#fmPersonAdd").form({
        success:function(data){   //data 接收后端返回的数据-------在表单提交成功后，接收后端接口，返回的数据【与表单提交时的点击事件，配套使用】 
           console.log(data)//注意：data为String类型，我们需要对他转为json
          var json= JSON.parse(data);
          if(json.code===200){
              location.href="index.html"  //跳转到 index.html页面
          }
        } 
    })
//-------------------------------下面都是旧的，就是为了画页面，来写的
$("#frmdiv").dialog({
    title:'客户添加',
    iconCls:'icon-man',
    width:300,
    buttons:'#addPersonBtn',//在dialog对话框底部，绑定一个按钮组

});
$("#name").textbox({
  required:true  //用户必须输入信息
});
$("#age").numberbox({
  required:true,  //用户必须输入信息
  precision:0, //指定保留几位小数
  min:0,  //输入的最小值
  max:120, //输入的最大值

});
$("#sex").textbox({
  required:true,  //用户必须输入信息
  precision:0, //指定保留几位小数
  min:0,  //输入的最小值
  max:1, //输入的最大值
});
$("#tel").numberbox({
  required:true,  //用户必须输入信息
  precision:0, //指定保留几位小数
  validType:'length[11,11]',//指定校验规则
  invalidMessage:'手机号必须为11位的长度', //当用户输入的信息，不符合validType中的校验规则，报的提示信息
});
$("#address").textbox({
    multiline:true,//是否是多行
    height:50
});
</script>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJmlmgxy-1663306942965)(图片/image-20210725100423160.png)]

7、数据表格 datagrid

它的继承关系：

它继承了panel

属性：

列属性：
- sorted:true
  - 作用：效果，列可以被点击
  - 注意事项：
    - 1、用户点击，自动请求datagrid的url,并且自动的携带请求参数
```
sort=该列的field&order=asc|desc-------------------->因此，如果想实现这个通过点击某列，来根据这个列进行排序的效果，需要我们，写对应的接口，提供对应的参数，来实现
```
- hidden:true 表示隐藏这一列
- formatter:
  - datagrid在渲染每行数据的时候，会自动调用一次该函数，并且会将row、index、value这3个参数，传给函数。并将function的返回值，显示在当前列的位置。
  - 应用场景：比如后端存的性别字段是数字，而我想在前端展示，将 1 变为‘男’，将0变为 ‘女’ 进行展示

案例演示

formatter :可以将标记量，转为指定的字符，进行页面显示
striped:true 斑马线效果
使用datagrid渲染数据，如果有些列，需要加easyUI的样式，那么可以将其放到onLoadSuccess事件，所对应的方法中，进行添加easyUI的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo2</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>

</head>
<body>
<table id="datagrid_person">
    <thead>
    <tr>
        <th>id</th>
        <th>名字</th>
        <th>年龄</th>
        <th>手机号</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
</table>

<div id="datagrid_tooblar">
    <a href="#">删除选中</a>
    <a href="#">添加</a>
    <input type="text" name="search" id="search">
</div>

</body>
<script>
    /*datagrid的使用---------后端必须返回的是一个list集合*/
    $("#datagrid_person").datagrid({
            title:'客户信息',   //使用panel的属性，给datagrid设置标题
            iconCls:'icon-man', //设置图标
          //  width:500 ,//设置datagrid整体的宽度

            url:'http://localhost:8080/institutionalLibrary/getBooks',//自动的请求url ,并自动创建tr,将后端数据装进去
            columns:[[
                {field:'num',title:'num',checkbox:true,width:100},
                {field:'id',title:'id',width:100,hidden:true},
                {field:'author',title:'名字',width:100,formatter: function(value,row,index){
                    /*
                    * value:表示当前列的值
                    * row：表示当前行的json数据
                    * index:数据所在行的下标
                    * */
                        if (value==1){
                            return '男';
                        } else {
                            return '女';
                        }
                    }
                },
                {field:'name',title:'书名',width:300,align:'right'},
                {field:'caozuo',title:'操作',width:300,align:'right',formatter: function(value,row,index){
                       return '<a href="#" class="person_remove_btn">删除</a>  <a href="#" class="person_update_btn">修改</a>'
                }},
            ]],//field 指定后端传过来的数据的key  title:指定前端要显示的列名 checkbox：是否显示复选框  hidden 隐藏某一列
             toolbar:"#datagrid_tooblar",//给datagrid引用自定义的按钮组
             rownumbers:true,//显示行号
             checkOnSelect:false,//使行只有在复选框选中，才是真正的选中【不设置它，默认是用户点击行，就会自动勾选所对应的复选框】
            fitColumns:true,//让表格的列宽，强行自适应整个页面的宽度
            striped:true,//斑马线效果
            onLoadSuccess:function () {//onLoadSuccess事件，在datagrid数据加载完后，执行-----因为使用datagrid，比如给他添加操作列，这个easyUI按照它本身的加载逻辑，它是从上往下一次性加载完，这就导致，直接给操作列设置easyUi样式没有效果，因此就需要借助该方法来实现

                $('.person_remove_btn').linkbutton({
                    iconCls:'icon-cancel'
                })
                $('.person_update_btn').linkbutton({
                    iconCls:'icon-edit'
                })
            }
    }
    );
 //给datagrid添加按钮------------------------------------------------------------
    /*生成linkbutton*/
    $("#datagrid_tooblar>a:contains(删除选中)").linkbutton({
        iconCls:'icon-remove',  // 给按钮添加一个图标

    });
    $("#datagrid_tooblar>a:contains(添加)").linkbutton({
        iconCls:'icon-add',  // 给按钮添加一个图标

    });
    $("#search").textbox({
        buttonText:"搜索",//显示一个按钮，并指定按钮的文字
        buttonIcon:"icon-search", //设置输入框按钮，上的图标
    })

</script>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8WiNfzBK-1663306942966)(图片/image-20210725201518429.png)]

datagrid（分页）

效果：

datagrid属性：
pagination:true;  添加分页效果-----------------后端要，配置2个参数page、rows  来实现分页查询数据

-----------------------------------------------------------------------------------------      
后端需要返回的分页查询的数据格式：//只需要这2个参数，其他都不需要

{
rows: list集合的数据,
total:数据总数
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MFbtd8wz-1663306942967)(图片/image-20210725202755279.png)]

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo2</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>

</head>
<body>
<table id="datagrid_person">
    <thead>
    <tr>
        <th>id</th>
        <th>名字</th>
        <th>年龄</th>
        <th>手机号</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
</table>

<div id="datagrid_tooblar">
    <a href="#">删除选中</a>
    <a href="#">添加</a>
    <input type="text" name="search" id="search">
</div>

</body>
<script>
    /*datagrid的使用---------后端必须返回的是一个list集合*/
    $("#datagrid_person").datagrid({
            title:'客户信息',   //使用panel的属性，给datagrid设置标题
            iconCls:'icon-man', //设置图标
          //  width:500 ,//设置datagrid整体的宽度

            url:'http://localhost:8080/institutionalLibrary/getBooks',//自动的请求url ,并自动创建tr,将后端数据装进去
            columns:[[
                {field:'num',title:'num',checkbox:true,width:100},
                {field:'id',title:'id',width:100,hidden:true},
                {field:'author',title:'名字',width:100,formatter: function(value,row,index){
                    /*
                    * value:表示当前列的值
                    * row：表示当前行的json数据
                    * index:数据所在行的下标
                    * */
                        if (value==1){
                            return '男';
                        } else {
                            return '女';
                        }
                    }
                },
                {field:'name',title:'书名',width:300,align:'right'},
                {field:'caozuo',title:'操作',width:300,align:'right',formatter: function(value,row,index){
                       return '<a href="#" class="person_remove_btn">删除</a>  <a href="#" class="person_update_btn">修改</a>'
                }},
            ]],//field 指定后端传过来的数据的key  title:指定前端要显示的列名 checkbox：是否显示复选框  hidden 隐藏某一列
             toolbar:"#datagrid_tooblar",//给datagrid引用自定义的按钮组
             rownumbers:true,//显示行号
             checkOnSelect:false,//使行只有在复选框选中，才是真正的选中【不设置它，默认是用户点击行，就会自动勾选所对应的复选框】
            fitColumns:true,//让表格的列宽，强行自适应整个页面的宽度
            striped:true,//斑马线效果
            onLoadSuccess:function () {//onLoadSuccess事件，在datagrid数据加载完后，执行-----因为使用datagrid，比如给他添加操作列，这个easyUI按照它本身的加载逻辑，它是从上往下一次性加载完，这就导致，直接给操作列设置easyUi样式没有效果，因此就需要借助该方法来实现

                $('.person_remove_btn').linkbutton({
                    iconCls:'icon-cancel'
                })
                $('.person_update_btn').linkbutton({
                    iconCls:'icon-edit'
                })
            },
        pagination:true,
    }
    );
 //给datagrid添加按钮------------------------------------------------------------
    /*生成linkbutton*/
    $("#datagrid_tooblar>a:contains(删除选中)").linkbutton({
        iconCls:'icon-remove',  // 给按钮添加一个图标

    });
    $("#datagrid_tooblar>a:contains(添加)").linkbutton({
        iconCls:'icon-add',  // 给按钮添加一个图标

    });
    $("#search").textbox({
        buttonText:"搜索",//显示一个按钮，并指定按钮的文字
        buttonIcon:"icon-search", //设置输入框按钮，上的图标
    })

</script>
</html>

datagrid（批量删除）

datagrid中常用的方法：
        reload:把当前页的数据，重新加载一遍    例如：你正在查看第三页的数据，它就是重新刷新，还是第三页的数据
        load：如果是分页，它会显示第一页的数据
        
        getSelections：获得所有被选中的数据
        getChecked：获取所有被勾选的行【常用这个，不用getSelections】

例：

<script>
    function test1(){
        $("#datagrid_person").datagrid("reload")
    }
    function test2(){
        $("#datagrid_person").datagrid("load")
    }

</script>
<button id="reload" onclick="test1()">reload</button>
<button id="reload" onclick="test2()">load</button>

案例演示

核心代码

    /*生成linkbutton*/
    $("#datagrid_tooblar>a:contains(删除选中)").linkbutton({  //---------------批量删除------------
        iconCls:'icon-remove',  // 给按钮添加一个图标
        onClick:function () {
            var as=$("#datagrid_person").datagrid('getChecked');//获取到用户，所有勾选的数据
            console.log(as)
            var param="";
            for (var i = 0; i <as.length ; i++) {
                var id=as[i].id;
                if(i==0){
                    param=param+"id="+id;
                    
                }else{
                    param=param+"&id="+id;
                }
            }
            console.log(param)
            //2、发送ajax，发送参数
             $.ajax({
                 url:'',
                 type:'post',
                 data:param,
                 dataType:'json',
                 success:function (json) {
                     console.log(json)
                     //1、重新加载当前页面的数据
                     $("#datagrid_person").datagrid("reload")
                     //2、提示信息
                     $.message.show({
                         title:'提示',
                         msg:json.msg,
                     })
                 }
             })
        }

    });

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo2</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>

</head>
<body>
<script>
    function test1(){
        $("#datagrid_person").datagrid("reload")
    }
    function test2(){
        $("#datagrid_person").datagrid("load")
    }

</script>
<button id="reload" onclick="test1()">reload</button>
<button id="reload" onclick="test2()">load</button>
<table id="datagrid_person">
    <thead>
    <tr>
        <th>id</th>
        <th>名字</th>
        <th>年龄</th>
        <th>手机号</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
</table>

<div id="datagrid_tooblar">
    <a href="#" >删除选中</a>
    <a href="#">添加</a>
    <input type="text" name="search" id="search">
</div>

</body>
<script>
    /*datagrid的使用---------后端必须返回的是一个list集合*/
    $("#datagrid_person").datagrid({
            title:'客户信息',   //使用panel的属性，给datagrid设置标题
            iconCls:'icon-man', //设置图标
          //  width:500 ,//设置datagrid整体的宽度

            url:'http://localhost:8080/institutionalLibrary/getBooks',//自动的请求url ,并自动创建tr,将后端数据装进去
            columns:[[
                {field:'num',title:'num',checkbox:true,width:100},
                {field:'id',title:'id',width:100,hidden:true},
                {field:'author',title:'名字',width:100,formatter: function(value,row,index){
                    /*
                    * value:表示当前列的值
                    * row：表示当前行的json数据
                    * index:数据所在行的下标
                    * */
                        if (value==1){
                            return '男';
                        } else {
                            return '女';
                        }
                    }
                },
                {field:'name',title:'书名',width:300,align:'right'},
                {field:'caozuo',title:'操作',width:300,align:'right',formatter: function(value,row,index){
                       return '<a href="#" class="person_remove_btn">删除</a>  <a href="#" class="person_update_btn">修改</a>'
                }},
            ]],//field 指定后端传过来的数据的key  title:指定前端要显示的列名 checkbox：是否显示复选框  hidden 隐藏某一列
             toolbar:"#datagrid_tooblar",//给datagrid引用自定义的按钮组
             rownumbers:true,//显示行号
             checkOnSelect:false,//使行只有在复选框选中，才是真正的选中【不设置它，默认是用户点击行，就会自动勾选所对应的复选框】
            fitColumns:true,//让表格的列宽，强行自适应整个页面的宽度
            striped:true,//斑马线效果
            onLoadSuccess:function () {//onLoadSuccess事件，在datagrid数据加载完后，执行-----因为使用datagrid，比如给他添加操作列，这个easyUI按照它本身的加载逻辑，它是从上往下一次性加载完，这就导致，直接给操作列设置easyUi样式没有效果，因此就需要借助该方法来实现

                $('.person_remove_btn').linkbutton({
                    iconCls:'icon-cancel'
                })
                $('.person_update_btn').linkbutton({
                    iconCls:'icon-edit'
                })
            },
        pagination:true,
    }
    );
 //给datagrid添加按钮------------------------------------------------------------
    /*生成linkbutton*/
    $("#datagrid_tooblar>a:contains(删除选中)").linkbutton({  //---------------批量删除------------
        iconCls:'icon-remove',  // 给按钮添加一个图标
        onClick:function () {
            var as=$("#datagrid_person").datagrid('getChecked');//获取到用户，所有勾选的数据
            console.log(as)
            var param="";
            for (var i = 0; i <as.length ; i++) {
                var id=as[i].id;
                if(i==0){
                    param=param+"id="+id;

                }else{
                    param=param+"&id="+id;
                }
            }
            console.log(param)
            //2、发送ajax，发送参数
             $.ajax({
                 url:'',
                 type:'post',
                 data:param,
                 dataType:'json',
                 success:function (json) {
                     console.log(json)
                     //1、重新加载当前页面的数据
                     $("#datagrid_person").datagrid("reload")
                     //2、提示信息
                     $.message.show({
                         title:'提示',
                         msg:json.msg,
                     })
                 }
             })
        }

    });
    $("#datagrid_tooblar>a:contains(添加)").linkbutton({
        iconCls:'icon-add',  // 给按钮添加一个图标

    });
    $("#search").textbox({
        buttonText:"搜索",//显示一个按钮，并指定按钮的文字
        buttonIcon:"icon-search", //设置输入框按钮，上的图标
    })

</script>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txiuEDux-1663306942967)(图片/image-20210725221147889.png)]

datagrid(搜索)

<input type="text" name="search" id="search">   //html代码


$("#search").textbox({
        buttonText:"搜索",//显示一个按钮，并指定按钮的文字
        buttonIcon:"icon-search", //设置输入框按钮，上的图标
        onClickButton:function () {  //给搜索按钮，绑定一个单击事件
            //1、获取输入框中，用户输入的文本
            var keyword=$('#search').val();
            //2、发送请求------------这里使用datagrid的load方法，来发送请求
            $("#datagrid_person").datagrid("load",{
                keywords:keyword   //keywords 对应后端接收的查询参数  keyword对应我从输入框中获取的数据
            })
            //3、数据自动重新加载
            
            //4、提示信息：查询结束
        }
    })

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo2</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>

</head>
<body>
<script>
    function test1(){
        $("#datagrid_person").datagrid("reload")
    }
    function test2(){
        $("#datagrid_person").datagrid("load")
    }

</script>
<button id="reload" onclick="test1()">reload</button>
<button id="reload" onclick="test2()">load</button>
<table id="datagrid_person">
    <thead>
    <tr>
        <th>id</th>
        <th>名字</th>
        <th>年龄</th>
        <th>手机号</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
</table>

<div id="datagrid_tooblar">
    <a href="#" >删除选中</a>
    <a href="#">添加</a>
    <input type="text" name="search" id="search">
</div>

</body>
<script>
    /*datagrid的使用---------后端必须返回的是一个list集合*/
    $("#datagrid_person").datagrid({
            title:'客户信息',   //使用panel的属性，给datagrid设置标题
            iconCls:'icon-man', //设置图标
          //  width:500 ,//设置datagrid整体的宽度

            url:'http://localhost:8080/institutionalLibrary/getBooks',//自动的请求url ,并自动创建tr,将后端数据装进去
            columns:[[
                {field:'num',title:'num',checkbox:true,width:100},
                {field:'id',title:'id',width:100,hidden:true},
                {field:'author',title:'名字',width:100,formatter: function(value,row,index){
                    /*
                    * value:表示当前列的值
                    * row：表示当前行的json数据
                    * index:数据所在行的下标
                    * */
                        if (value==1){
                            return '男';
                        } else {
                            return '女';
                        }
                    }
                },
                {field:'name',title:'书名',width:300,align:'right'},
                {field:'caozuo',title:'操作',width:300,align:'right',formatter: function(value,row,index){
                       return '<a href="#" class="person_remove_btn">删除</a>  <a href="#" class="person_update_btn">修改</a>'
                }},
            ]],//field 指定后端传过来的数据的key  title:指定前端要显示的列名 checkbox：是否显示复选框  hidden 隐藏某一列
             toolbar:"#datagrid_tooblar",//给datagrid引用自定义的按钮组
             rownumbers:true,//显示行号
             checkOnSelect:false,//使行只有在复选框选中，才是真正的选中【不设置它，默认是用户点击行，就会自动勾选所对应的复选框】
            fitColumns:true,//让表格的列宽，强行自适应整个页面的宽度
            striped:true,//斑马线效果
            onLoadSuccess:function () {//onLoadSuccess事件，在datagrid数据加载完后，执行-----因为使用datagrid，比如给他添加操作列，这个easyUI按照它本身的加载逻辑，它是从上往下一次性加载完，这就导致，直接给操作列设置easyUi样式没有效果，因此就需要借助该方法来实现

                $('.person_remove_btn').linkbutton({
                    iconCls:'icon-cancel'
                })
                $('.person_update_btn').linkbutton({
                    iconCls:'icon-edit'
                })
            },
        pagination:true,
    }
    );
 //给datagrid添加按钮------------------------------------------------------------
    /*生成linkbutton*/
    $("#datagrid_tooblar>a:contains(删除选中)").linkbutton({  //---------------批量删除------------
        iconCls:'icon-remove',  // 给按钮添加一个图标
        onClick:function () {
            var as=$("#datagrid_person").datagrid('getChecked');//获取到用户，所有勾选的数据
            console.log(as)
            var param="";
            for (var i = 0; i <as.length ; i++) {
                var id=as[i].id;
                if(i==0){
                    param=param+"id="+id;

                }else{
                    param=param+"&id="+id;
                }
            }
            console.log(param)
            //2、发送ajax，发送参数
             $.ajax({
                 url:'',
                 type:'post',
                 data:param,
                 dataType:'json',
                 success:function (json) {
                     console.log(json)
                     //1、重新加载当前页面的数据
                     $("#datagrid_person").datagrid("reload")
                     //2、提示信息
                     $.message.show({
                         title:'提示',
                         msg:json.msg,
                     })
                 }
             })
        }

    });
    $("#datagrid_tooblar>a:contains(添加)").linkbutton({
        iconCls:'icon-add',  // 给按钮添加一个图标

    });
    $("#search").textbox({
        buttonText:"搜索",//显示一个按钮，并指定按钮的文字
        buttonIcon:"icon-search", //设置输入框按钮，上的图标
        onClickButton:function () {  //给搜索按钮，绑定一个单击事件
            //1、获取输入框中，用户输入的文本
            var keyword=$('#search').val();
            //2、发送请求------------这里使用datagrid的load方法，来发送请求
            $("#datagrid_person").datagrid("load",{
                keywords:keyword   //keywords 对应后端接收的查询参数  keyword对应我从输入框中获取的数据
            })
            //3、数据自动重新加载

            //4、提示信息：查询结束
        }
    })

</script>
</html>