前台表格代码
来源：互联网 发布：手机屏幕写字的软件 编辑：程序博客网 时间：2024/05/17 12:49
<#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" onclick="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"onkeydown="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" onclick="addInfo()" style="margin-left: 25%;">确定</a> <a class="easyui-linkbutton" id="btnOK" onclick="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" onclick="editInfo()" style="margin-left: 25%;">确定</a> <a class="easyui-linkbutton" id="btnOK" onclick="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> 0 0
- 前台表格代码
- 后台生成前台表格
- 前台代码
- 学生信息管理前台代码
- 前台调用后台代码
- 三级联动前台代码
- 动态目录树-------------前台代码
- 前台验证的js代码
- asp.net输出前台代码
- 网站前台部分有用代码
- 前台获取后台c#代码
- 服务器端调用前台js代码
- 前台代码中显示后台程序
- asp.net前台嵌入代码
- Jqplot柱图前台代码
- 前台获取后台c#代码
- 【前端】Ajax+json_demo前台代码
- ajax前台js代码实现
- Android 跨进程通信: AIDL
- stl——括号匹配
- Leetcode 233. Number of Digit One
- 使用SqlBulkCopy实现批量插入
- 被说了很多遍的设计模式---中介者模式
- 前台表格代码
- Unity3D-屏幕截图
- LeetCode 396. Rotate Function
- LeetCode Max Consecutive Ones
- java从入门到弃坑第四天
- C# 启动调试 开始执行（不调试）多线程程序执行效果不一样 Mutex（已解决）
- 软件工程从头学起（大数据方向）
- Java反射获取Android系统属性值
- fatal: unable to access 'https://github.com/taoge1024/kityminder.git/': SSL cert ificate problem: un
