html,jqueyEasyui,layui的i常用界面实战

最新推荐文章于 2024-05-15 11:25:51 发布

被抽空的血管

最新推荐文章于 2024-05-15 11:25:51 发布

阅读量262

点赞数

分类专栏： java--前端

java--前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章的主要内容

html
jqueyEasyui
参考文章：https://blog.csdn.net/sinat_34170721/article/details/52399915
注意：表单和数据表格都还涉及到回显问题，所以每一个都有提供对应的数据格式化和解析方法
layui

html

jqueyEasyui

数据表格

//dataGrid自适应

$(window).resize(function() {

    $('#dgUser').datagrid('resize')

});

var businessTypes = [{ "value": "1","text": "电音" }, { "value": "2","text": "管乐器" }, { "value": "3","text": "吉他" }, { "value": "4","text": "钢琴" }];

var authoritys = [{ "value": "2","text": "管理者" }, { "value": "3","text": "技术" }, { "value": "5","text": "YAMAHA技术" }];

function businessTypeValue(value) {

    varvalues = new Array();

    values =value.split(',');

    varbusinessType = "";

    for(vari = 0; i < businessTypes.length; i++) {

        if(values.length > 0) {

            for(varj = 0; j < values.length; j++) {

               if (businessTypes[i].value ==values[j]) {

                   businessType += businessTypes[i].text + ",";

                }

            }

        }

        if(businessTypes[i].value == value) {

            returnbusinessTypes[i].text;

        }

    }

   businessType = businessType.substring(0, businessType.length - 1);

    returnbusinessType;

}

 

function authorityValue(value) {

    varvalues = new Array();

    values =value.split(',');

    varauthority = "";

    for(vari = 0; i < authoritys.length; i++) {

        if(values.length > 0) {

            for(varj = 0; j < values.length; j++) {

               if (authoritys[i].value == values[j]) {

                   authority += authoritys[i].text + ",";

               }

            }

        }

        if(authoritys[i].value == value) {

            returnauthoritys[i].text;

        }

    }

    authority= authority.substring(0, authority.length - 1);

    returnauthority;

}

 

$(function () {

    if($('#statusBF').val() == 1) {

        $('#zc').combobox({ selected: true});

    }

    if($('#statusBF').val() == 2) {

        $('#hmd').combobox({ selected: true});

    }

    if($('#statusBF').val() == 3) {

        $('#cx').combobox({ selected: true});

    }

    if($('#busTypes').val() == 1)

    {

        $('#P').show();

        $("#gqs").attr("checked",true);

    }

    if($('#busTypes').val() == 2) {

        $('#W').show();

        $("#gyqs").attr("checked",true);

    }

    if($('#busTypes').val() == 3) {

        $('#GT').show();

        $("#gts").attr("checked",true);

    }

    if($('#busTypes').val() == 4) {

        $('#DY').show();

        $("#dys").attr("checked",true);

    }

   

    //绑定用户管理数据

    $("#dgUser").datagrid({

       method: 'get',

       queryParams: queryParams,

        url:locationAddress + "/SysUser/UserList?rand="+ Math.random(),//加载的URL 

        pagination:true,//显示分页

       pageSize: 15,//分页大小

       singleSelect: true,//只允许选择单行

       pageList: [5, 10, 15, 20],//每页的个数 

        fit: false,//自动补全 

       fitColumns: true,

       iconCls: "icon-save",//图标 

       title: "用户信息",

        loadMsg:"正在加载，请稍等...",

       rownumbers: true,//行号

       autoRowHeight: true,//定义是否设置基于该行内容的行高度

       striped: true,//设置为 true，则把行条纹化。（即奇偶行使用不同背景色）

       columns: [[      //每个列具体内容 

                   {

                        field: 'UserId', title: 'ID', width:100

                   },

                   {

                        field: 'UserName', title: '姓名', width: 100

                   },

                   {

                        field: 'Password', title: '密码', width: 100

                    },

                   {

                        field: 'AsId', title: '公司', width: 100

                   },

                   {

                        field: 'BusinessType', title: '分类', width:100, formatter: businessTypeValue, editor: { type: 'combobox',options: { data: businessTypes, valueField: "value",textField: "text", panelHeight: 'auto', multiple: true } }

                   },

                   {

                        field: 'RoleID', title: '权限', width: 100, formatter: authorityValue,editor: { type: 'combobox', options: { data: authoritys,valueField: "value",textField: "text", panelHeight: 'auto' } }

                   },

                   {

                        field: 'Mail', title: '邮件地址', width: 100

                    },

                   {

                        field: 'id', title: '操作', width: 88, align: "center",

                        formatter: function(value, row, index) {

                            varhtml = "<a href='javascript:void(0)' οnclick=\"editeUser('"+ row.UserId + "','" + row.UserName + "','" + row.Password + "','"+ row.AsId + "','" + row.BusinessType + "','" + row.RoleID + "','"+ row.Mail + "','" + row.Remark + "')\">修改</a>&nbsp;&nbsp;&nbsp;";

                            html += "<a href='javascript:void(0)'   οnclick=\"deleUser('" + row.UserId + "')\">删除</a>";

                            returnhtml;

                        }

                   }

        ]],

       loadFilter: function (data) {

               return data;

        }

    });

 

    varqueryParams = $('#dgUser').datagrid('options').queryParams;

    //设置分页控件     

 

    varp = $('#dgUser').datagrid('getPager');

 

   $(p).pagination({

 

       beforePageText: '第',//页数文本框前显示的汉字         

 

       afterPageText: '页    共 {pages} 页',

 

       displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',

    });

 

    //查询按钮

    $("#selectUser").click(function() {

        $("#dgUser").datagrid("reload");

       queryParams["Cauthority"] = $("#cauthority").combobox('getValue');

       queryParams["BusinessType"] = $("#businessType").combobox('getValue');

       queryParams["UserId"] = $("input[name=userId]").val();

        $('#dgUser').datagrid('options').queryParams= queryParams;

        $('#dgUser').datagrid("reload");

    });

 

    //修改弹窗初始关闭

    $('#editUserDialog').dialog('close');

    $("#menuDialog").dialog("close");

});

 

 

 

//删除单条数据

function deleUser(id, UserId) {

   $.messager.confirm("删除操作", "是否继续删除操作？", function (r) {

        if(r) {

           $.get(locationAddress + "/SysUser/DeleteUser?rand="+ Math.random(), { userId: id }, function (data){

               if (data == 0)

                   $.messager.alert("删除操作", "删除失败");

               else {

                   $.messager.alert("删除操作", "删除成功");

                    $("#dgUser").datagrid("reload");

               }

           })

        }

    });

}

 

//修改单条数据

functionediteUser(userId,userName,password,asId, businessType, roleID, mail, remark) {

    $("#userId").val(userId);

    $("#userName").val(userName);

    $("#password").val(password);

    $("#asId").val(asId);

    $("#mail").val(mail);

    $("#remark").val(remark);

    $('#roleID').combobox('setValue',roleID);

    varopts = businessType.split(',');

    for(vari = 0; i < businessTypes.length; i++) {

        if(opts.length > 0) {

            for(varj = 0; j < opts.length; j++) {

               if (businessTypes[i].value == opts[j]){

                   if (businessTypes[i].value == "1")

                        $("#dy").attr("checked",true);

                   if (businessTypes[i].value == "2")

                        $("#gyq").attr("checked",true);

                   if (businessTypes[i].value == "3")

                        $("#jt").attr("checked",true);

                   if (businessTypes[i].value == "4")

                        $("#gq").attr("checked",true);

               }

            }

        }

    }

 

    $('#editUserDialog').dialog({

       title: '修改用户信息',

       width: 300,

       height: 500,

       closed: false,

       cache: false,

       modal: true,

       buttons: [{

           text: '确认修改',

           handler: function () {

               var userIdValue = $('#userId').val();

               var userNameValue = $('#userName').val();

                varpasswordValue = $('#password').val();

               var asIdValue = $('#asId').val();

               var roleIDValue = $('#roleID').combobox('getValue');

               var businessTypeValue = "";

               var obj = document.getElementsByName("businessType");

               for (vari = 0; i < obj.length; i++) {

                   if (obj[i].checked) {

                        businessTypeValue +=obj[i].value + ",";

                   }

               }

               businessTypeValue = businessTypeValue.substring(0,businessTypeValue.length - 1);

               var mailValue = $('#mail').val();

               var remarkValue = $('#remark').val();

               if (passwordValue == '')

                   $.messager.alert("操作提示", "密码不能为空");

               {

                   $.post(locationAddress + "/SysUser/UpdateUser?rand="+ Math.random(), {userId:userIdValue, userName:userNameValue,password:passwordValue,asId:asIdValue,roleID:roleIDValue,businessType: businessTypeValue, mail: mailValue, remark: remarkValue},

                        function(data) {

                           if(data > 0) {

                               $.messager.alert("操作提示", "修改成功");

 

                                $('#addUserDialog').dialog('close');

                                $("#dgUser").datagrid("reload");

                            }

                            else

                               $.messager.alert("操作提示", "修改失败");

                        });

               }

            }

        }, {

           text: '关闭',

           handler: function () { $("input[name='businessType']").attr("checked", false);$('#editUserDialog').dialog('close'); }

        }]

    });

}

注意：jquery easyui中$(’#table’).datagrid(‘options’).queryParams是什么意思

$('#table').datagrid('options')
这句话你应该明白吧！就是获得你初始化datagird时的option对象；
如：
var param = {key:3};
$('#table').datagrid({
title : '我的dataGrid',
iconCls : "icon-search",
width : 700,
height : 450,
nowrap : false,
striped : true,
fit : true,
url : '${ctx}/sys/account/user!queryList.action,
queryParams : param,
......(以下省略)
});
而option里面的所有属性就是这上面初始化设置的属性；
$('#table').datagrid('options').queryParams
这句话就是去取到option对象里面的queryParams属性的值；
如上面的例子，那么queryParams属性值就是param这个对象；
queryParams属性的意思是--------当请求远程数据时，发送的额外参数。
额外参数，就是你url请求里面需要添加的参数；

$(’#dgUserIntegralList’).datagrid(‘getPager’); 是什么意思

var pager = $('#dgUserIntegralList').datagrid('getPager');    // get the pager of datagrid
                pager.pagination({
                    pageSize:10,
                    pageList:  [10,50,100],
                    displayMsg:'',
                    links : 5,
                    layout:['prev','links','next','list']
                });     
        });

参考文章：https://www.cnblogs.com/cuijinlong/p/7063733.html

表单
提交方式：

用法

1.  <form id="ff" method="post">  

2.      ...   

3.  </form>  

使 form 成为 ajax 提交的 form 。

1.  $('#ff').form({   

2.      url:...,   

3.      onSubmit: function(){   

4.          // 做某些检查   

5.          // 返回 false 来阻止提交   

6.      },   

7.      success:function(data){   

8.          alert(data)   

9.      }   

10. });   

11. // 提交 form   

12. $('#ff').submit();  

去做一个提交动作。

1.  // 调用 form  插件的 'submit' 方法来提交 form   

2.  $('#ff').form('submit', {   

3.      url:...,   

4.      onSubmit: function(){   

5.          // 做某些检查   

6.          // 返回 false 来阻止提交   

7.      },   

8.      success:function(data){   

9.          alert(data)   

10.     }   

11. });

表单提交：两种方式：第一种：不需要ajax提交；第二种：选择ajax提交
第一种：


<div id="Editwin" class="easyui-window" title="编辑班级信息" style="width: 400px; height: auto;top:105px" data-options="closed:true,collapsible:false,minimizable:false,maximizable:false"> 
  <div style="margin-top: 30px; margin-bottom: 30px; margin-left: 70px;"> 
    <form id="EditForm" method="post"> 
      <table> 
        <tr> 
          <td>班级名称:</td> 
          <td> 
             <input class="easyui-validatebox" type="text" id="EditClassName" name="ClassName" data-options="required:true,validType:['maxLength[20]']"/> 
          </td> 
        </tr> 
        <tr> 
          <td> 
            <input style="display:none" class="easyui-textbox" type="text" id="EditClassID" name="ClassID" data-options="required:true"/> 
          </td> 
        </tr> 
        <tr> 
          <td>所属机构:</td> 
          <td> 
            <input id="EditOrganizationID" class="easyui-combobox" name="OrganizationName1" data-options="required:true"/> 
        </tr>      
        <tr> 
          <td>年级:</td> 
          <td> 
            <input id="EditGradeID" class="easyui-combobox" name="GradeName" data-options="required:true"/>  
        </tr> 
  
        <tr> 
          <td>备注:</td> 
          <td> 
            <textarea class="easyui-validatebox" id="NoteId" name="Note" validType:['maxLength[50]></textarea> 
        </tr> 
        </table> 
  
      <div style="margin-top: 20px;"> 
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="margin-left: 10px;" οnclick="EditsubmitForm()">确定</a> 
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="margin-left: 60px;" οnclick="EditclearForm()">取消</a> 
      </div> 
    </form> 
  </div> 
</div> 



function EditsubmitForm() { 
      $('#EditForm').form('submit', { 
        url: "/BasicClass/ModifyClassInfo", 
        onSubmit: function () {        //表单提交前的回调函数 
          var isValid = $(this).form('validate');//验证表单中的一些控件的值是否填写正确，比如某些文本框中的内容必须是数字 
          if (!isValid) { 
          } 
          return isValid; // 如果验证不通过，返回false终止表单提交 
        }, 
        success: function (data) {  //表单提交成功后的回调函数，里面参数data是我们调用/BasicClass/ModifyClassInfo方法的返回值。 
          if (data > 0) { 
            $.messager.show({ 
              title: '提示消息', 
              msg: '提交成功', 
              showType: 'show', 
              timeout: 1000, 
              style: { 
                right: '', 
                bottom: ''
              } 
            }); 
            $('#dg').datagrid('reload');  // 重新载入当前页面数据  
            $('#Editwin').window('close'); //关闭窗口 
          } 
          else { 
            $.messager.alert('提示信息', '提交失败，请联系管理员！', 'warning'); 
        } 
        } 
      }); 
}

原文链接：https://blog.csdn.net/u011464124/article/details/54691433

2.表单中其他组件
①日期组件：

 $(function () {
            
            $("#seart").datebox({
                required: true,
                missingMessage: "请选择",
                editable:false
            });
 
            $("#end").datebox({
                required: true,
                missingMessage: "请选择",
                editable: false
            });
            $("#seart").datebox("setValue", "2014-01-01");
            $("#end").datebox("setValue", "2014-01-01");
 
            //获取
            $("#btn").linkbutton({
                onClick: function () {
                    var stat = $("#seart").datebox("getValue");
                    var end = $("#end").datebox("getValue");
                    console.info(stat);
                }
            });
        });
<div>
        开始时间：<input id="seart" />至-结束时间：<input id="end" /><br/>
        <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">控制台</a>
    </div>