前台表格代码

最新推荐文章于 2023-10-21 11:38:05 发布
大玉玉
最新推荐文章于 2023-10-21 11:38:05 发布
阅读量823
点赞数 1
本文链接：https://blog.csdn.net/xingyu0806/article/details/69333990
版权
<#include "/common/_layout.html"/> <@layout>  
<html>  
<head>  
<title>行业管理列表</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script language="javascript" src="script/jquery.js"></script>  
<script language="javascript" src="script/pageCommon.js" charset="utf-8"></script>  
<script language="javascript" src="script/PageUtils.js" charset="utf-8"></script>  
<link type="text/css" rel="stylesheet" href="style/blue/pageCommon.css" />  
  
<!-- easyui相关文件 -->  
<link type="text/css" rel="stylesheet" href="style/themes/default/easyui.css" />  
<link type="text/css" rel="stylesheet" href="style/themes/icon.css" />  
<script language="javascript" src="script/easyui/jquery.easyui.min.js" charset="utf-8"></script>  
<script language="javascript" src="script/easyui/easyui-lang-zh_CN.js" charset="utf-8"></script>  
  
<script type="text/javascript">  
    $(function () {  
  
          
        $('#add').window('close');//首先将窗体隐藏  
        $('#update').window('close');  
        //当页面首次刷新的时候执行的事件  
        initTable();  
          
        $('#btnSerach').click(function () {  
        
        var txtKey=document.getElementById("txtKey").value;  
  
        var queryData={  
                txtKey:txtKey,  
            };  
        initTable(queryData);  
      //var rows = $('#dtIndustry').datagrid('getRows')  
      //$("#industryRank").val(rows[0]["ranking"]+5);  
       })  
         
    });  
        /*****************查******************/  
        //初始化表格  
        function initTable(queryData) {  
            $('#dtIndustry').datagrid({   //定位到Table标签，Table标签的ID是test  
                fitColumns: true,  
                url: 'industry/listInfo',   //指向后台的Action来获取当前用户的信息的Json格式的数据  
                title: '行业列表',  //标识  
                iconCls: 'icon-save',  
                height: 368,  
                nowrap: true,  
                autoRowHeight: false,  
                striped: true,  
                collapsible: true,  
                pagination: true,  
                rownumbers: true,  
                queryParams: queryData,  
                sortOrder: 'asc',  
                remoteSort: false,  
                selectOnCheck: false,  
                singleSelect: true,  
                //idField: 'industryName',                  
                columns: [[  
                    { field: 'ck', checkbox: true },  
                    {title: '行业名称', field: 'industryName', width:310,sortable: true},  
                    {title: '显示排序', field: 'ranking', width:310,sortable: true},  
                    {title: '主键', field: 'id', width:310,sortable: true,hidden:true},  
                    {title: '创建时间', field: 'versionStartTime', width:310,sortable: true},  
                    { title: '操作', field:'oc',width:310,sortable: true,formatter: function (value, row, index) { return OperateColumn(value, row, index) },  
                        styler: function () { return mouseMove() }},   
                ]],  
                onDblClickRow:function(rowIndex){openEdit(rowIndex);},  
                onRowContextMenu:function(e, rowIndex, rowData){  
                     e.preventDefault(); //阻止浏览器捕获右键事件  
                     $(this).datagrid("clearSelections"); //取消所有选中项  
                     $(this).datagrid("selectRow", rowIndex); //根据索引选中该行  
                     $('#menu').menu('show', {  
     //显示右键菜单  
                         left: e.pageX,//在鼠标点击处显示菜单  
                         top: e.pageY  
                     });    
                     $('#rightAdd').click(function(){  
                         openAdd();  
                     });  
                     $('#rightEdit').click(function(){  
                         $("#Name").val(rowData.industryName);  
                         $("#Rank").val(rowData.ranking);  
                         $("#id").val(rowData.id);  
                         $('#update').dialog({  
                            title:'编辑行业',  
                           });  
                         $('#update').window('open');  
                     });  
               },   
                toolbar: [{  
                    id: 'btnadd',  
                    text: '添加行业',  
                    iconCls: 'icon-add',  
                    handler: function () {  
                       //调用添加  
                        openAdd();  
                    }  
                }  
             ]  
            });  
        }  
  
          
        //enter键进行查询  
        function KeyDown() {  
  
            $('#txtKey').keypress(function (event) {  
                if (event.keyCode == 13) {  
                    event.keyCode++;  
                    var txtKey=document.getElementById("txtKey").value;  
  
                    var queryData={  
                            txtKey:txtKey,  
                        };  
                    initTable(queryData);  
                }  
            })  
        }  
          
      //鼠标移至操作栏变色  
      function mouseMove() {  
         return 'color:RGB(120,120,260);cursor: pointer';  
      }    
  
     //在"详情"一列中添加超链接.  
     function OperateColumn(value, row, index) {  
        return '<a href="#" id="link" οnclick="openEdit(' + index+ ')">编辑</a>';  
     }  
  
    //点击编辑的方法index  
    function openEdit(index){  
          
         $('#dtIndustry').datagrid('selectRow', index);// 关键在这里    
         var row = $('#dtIndustry').datagrid('getSelected');//,获取选中行  
      
         $("#Name").val(row.industryName);  
         $("#Rank").val(row.ranking);  
         $("#id").val(row.id);  
  
         $('#update').dialog({  
            title:'编辑行业',  
           });  
         $('#update').window('open');  
          
    }  
  
    function editInfo(index){  
        if(isNaN($("#Rank").val())){  
            $.messager.alert("友情提示", "行业排序格式错误，请输入数字排序！", "info");  
            return;  
            }  
           
         $.ajax({  
             url: 'industry/updateIndustryInfo',  
             async: false,  
             //cache: false,  
             type: 'post',  
             dataType: "json",  
             data: {  
                 industryName: $("#Name").val(),  
                industryRank:$("#Rank").val(),  
                 industryId:$("#id").val(),           
             },  
             success: function (data) {               
                 if(data==true){  
                    $('#update').window('close');  
                    //window.parent.frames.right.location.reload();   
                    $.messager.alert("友情提示", "行业更新成功！", "info");  
                    initTable();//完成后初始化表格  
                 }else{  
                     $.messager.alert("友情提示", "行业更新失败，请联系开发人员", "error");  
                     $('#update').window('close');  
                 }  
         }  
    });  
    }  
      
      function openAdd(){  
         // $("#industryRank").val("@Session['dtIndustry']");  
            //单击“添加领域”显示添加的信息框  
             var rowId="";  
            //弹框显示  
                   $('#add').dialog({  
            title:'添加行业',  
          });  
      
             $.ajax({  
                  
               type: "get",  
               dataType: "json",   
               async: false,  
               //url: "/field/selectFirstField",   
               url: "industry/selectIndustry",  
               success: function (data) {    
                     $("#industryRank").val(data[0].ranking+5);                               
               }  
           });  
     
          $('#add').window('open');  
      }  
  
      function addInfo(){  
           if(isNaN($("#industryRank").val())){  
            $.messager.alert("友情提示", "行业排序格式错误，请输入数字排序！", "info");  
            return;  
            }   
          $.ajax({  
              url: "industry/addIndustryInfo",  
              async: false,  
              cache: false,  
              type: 'post',  
              dataType: "json",  
              data: {  
                industryName: $("#IndustryName").val(),  
                industryRank:$("#industryRank").val(),  
              },  
              success: function (data) {  
                  if (data==true) {  
                        $.messager.alert("友情提示", "行业添加成功！", "info");  
                        initTable();   //完成后初始化表格  
                        $('#add').window('close');  
                        doReset();  
                            return;  
                } else {  
                    $.messager.alert("友情提示", "行业 "+$("#IndustryName").val()+" 已存在，不能再次添加！", "info");  
                }  
              },  
              error:function(){  
                $.messager.alert("友情提示", "行业添加失败，请联系开发人员", "error");  
                  
                return;  
              }  
          });  
  
      }  
     /*  function Reset(){  
          $("#Name").val("");  
          $("#Rank").val("");  
          $("#Name").focus();  
      }  
  
      function doReset(){  
          $("#IndustryName").val("");  
          $("#industryRank").val("");  
          $("#IndustryName").focus();  
      } */  
  
      function UpdateCancel(){  
          $('#update').window('close');  
          }  
      function AddCancel(){  
          doReset();  
          $('#add').window('close');  
      }  
      function rightClick(){  
          $('#dtIndustry').datagrid('selectRow',rowIndex);  
          openEdit(index);  
      }  
</script>  
</head>  
<body>  
  
    <div id="Title_bar">  
        <div id="Title_bar_Head">  
            <div id="Title_Head"></div>  
            <div id="Title">  
                <!--页面标题-->  
                <img border="0" width="13" height="13"  
                    src="style/images/title_arrow.gif" /> 行业管理  
            </div>  
            <div id="Title_End"></div>  
        </div>  
    </div>  
  
    <div id="MainArea">  
        <div>  
            <!-------------------------------搜索框----------------------------------->  
            <fieldset style="margin-bottom: 20px">  
                <legend>行业管理</legend>  
                <div>  
                    <label>请输入行业名称：</label> <input type="text" id="txtKey"  
                        name="txtKey"οnkeydοwn="KeyDown()" placeholder="行业名称"/>     <a  
                        class="easyui-linkbutton" iconcls="icon-search" id="btnSerach" >搜索</a>  
                </div>  
            </fieldset>  
  
            <!-------------------------------新闻信息----------------------------------->  
            <table id="dtIndustry" style="width: 1099px; margin: 20px 0 10px 8px"  
                title="订单列表" iconcls="icon-edit">  
            </table>  
        </div>  
        <!-- 添加行业的窗口 -->  
        <div id="add" class="easyui-dialog">  
            </br> </br> <input id="appealId" type="hidden" />  
            <div style="margin-left: 20%;">  
                行业名称：<input id="IndustryName" type="text" class="easyui-textbox" maxLength=20/>  
                    
            </div>  
  
            <br />  
            <div style="margin-left: 20%; ">  
                显示顺序：<input id="industryRank" type="text" class="easyui-textbox" maxLength=10 readonly style="background-color: lightgray"/>  
            </div>  
            <br /> <br /> <a class="easyui-linkbutton" id="btnOK"  
                οnclick="addInfo()" style="margin-left: 25%;">确定</a> <a  
                class="easyui-linkbutton" id="btnOK" οnclick="AddCancel()"  
                style="padding-left: 40px;">取消</a> <br /> <br /> <br />  
        </div>  
  
        <!-- 更新行业的窗口 -->  
        <div id="update" class="easyui-dialog">  
            </br> </br> <input id="appealId" type="hidden" />  
            <div style="margin-left: 20%;">  
                行业名称：<input id="Name" class="easyui-textbox"  maxLength=20>     
            </div>  
  
            <br />  
            <div style="margin-left: 20%; margin-right: 20%">  
                显示顺序：<input id="Rank" class="easyui-textbox"  maxLength=10 />  
            </div>  
            <input id="id" class="easyui-textbox" style="display: none" /> <br />  
            <br /> <a class="easyui-linkbutton" id="btnOK" οnclick="editInfo()"  
                style="margin-left: 25%;">确定</a> <a class="easyui-linkbutton"  
                id="btnOK" οnclick="UpdateCancel()" style="padding-left: 40px;">取消</a> <br />  
            <br /> <br />  
        </div>  
    </div>  
  
    <div id="menu" class="easyui-menu" style="width: 100px; display: none;">  
        <div data-options="iconCls:'icon-add'" id="rightAdd">添加</div>  
        <div data-options="iconCls:'icon-edit'" id="rightEdit">编辑</div>  
    </div>  
</body>  
</html>  
</@layout>  

[html] view plain copy print?
<#macro layout>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">  
<head>  
<base href="${contextPath}/"/>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
</head>  
    <#nested>  
</html>  
</#macro>
大玉玉
关注
1
点赞
踩
0

收藏

觉得还不错? 一键收藏
13
评论
前台表格代码

行业管理列表 $(function () { $('#add').window('close');//首先将窗体隐藏 $('#update').window('close'); //当页面首次刷新的时候执行的事件
复制链接

扫一扫