flexigrid单表增删改案例前台显示

合集下载

使用FlexiGrid实现Extjs表格的效果

使用FlexiGrid实现Extjs表格的效果近一段时间Extjs真的是风光无限好，只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨 /源码不好调试。

但是对于Extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的Extjs的Jquery插件，所以就在Jquery 的插件海洋中一顿海找，呵呵，还真让我找到了。

看来还是我的Jquery好，小巧简单好像一部好的汽车引擎，我想要什么就可以自已 DIY，真是方便。

总体方案在网络传输上不超过80KB，速度比500KB大小的Extjs不知道要小上多少哪。

有段时间不写东西了，怕说的不清楚。

有需要代码的朋友可以访问我的网盘：/shared/khhs7olp1p下载地址：code.google./p/flexigrid/不过由于FlexiGrid在互联网上的大部分资料都是用PHP或者java写的，所以兄弟简单的对它进行了改制，也做了一个山寨版的Extjs表格实现，希望对大家有帮助。

基本使用：1 基本使用是非常简单的，只需要加入Jquery库与FlexiGrid的JS即可以对表格进行格式化与美化.1: <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">2:3: <script type="text/javascript" src="lib/jquery/jquery-1.2.6.min.js"></script>4:5: <script type="text/javascript" src="flexigrid.pack.js"></script>6:7: <%--<script type="text/javascript" src="lib/jquery/jquery-1.2.6-vsdoc-cn.js"></script>--%>8:9: <script type="text/javascript">10: $("document").ready(function() {11: $('#flexme1').flexigrid();12: $('#flexme2').flexigrid();13: });14: </script>2 加入需要格式化的表格即可1:<h1>2:最简单的flexigrid表格-1</h1>3:<table id="flexme1">4:<thead>5:<tr>6:<th width="100">7: Col 18:</th>9:<th width="100">10: Col 211:</th>12:<th width="100">13: Col 3 is a long header name14:</th>15:<th width="300">16: Col 417:</th>18:</tr>19:</thead>20:<tbody>21:<tr>22:<td>23: This is data 1 with overflowing content 24:</td>25:<td>26: This is data 227:</td>28:<td>29: This is data 330:</td>31:<td>32: This is data 433:</td>34:</tr>35:<tr>36:<td>37: This is data 138:</td>39:<td>40: This is data 2 41:</td>42:<td>43: This is data 3 44:</td>45:<td>46: This is data 4 47:</td>48:</tr>49:<tr>50:<td>51: This is data 1 52:</td>53:<td>54: This is data 2 55:</td>56:<td>57: This is data 3 58:</td>59:<td>60: This is data 4 61:</td>62:</tr>63:<tr>64:<td>65: This is data 1 66:</td>67:<td>68: This is data 2 69:</td>70:<td>71: This is data 3 72:</td>73:<td>74: This is data 4 75:</td>76:</tr>77:<tr>78:<td>79: This is data 1 80:</td>81:<td>82: This is data 2 83:</td>84:<td>85: This is data 3 86:</td>87:<td>88: This is data 4 89:</td>90:</tr>91:<tr>92:<td>93: This is data 1 94:</td>95:<td>96: This is data 2 97:</td>98:<td>99: This is data 3 100:</td>101:<td>102: This is data 4 103:</td>104:</tr>105:<tr>106:<td>107: This is data 1 108:</td>109:<td>110: This is data 2 111:</td>112:<td>113: This is data 3 114:</td>115:<td>116: This is data 4 117:</td>118:</tr>119:<tr>120:<td>121: This is data 1 122:</td>123:<td>124: This is data 2 125:</td>127: This is data 3 128:</td>129:<td>130: This is data 4 131:</td>132:</tr>133:<tr>134:<td>135: This is data 1 136:</td>137:<td>138: This is data 2 139:</td>140:<td>141: This is data 3 142:</td>143:<td>144: This is data 4 145:</td>146:</tr>147:<tr>148:<td>149: This is data 1 150:</td>151:<td>152: This is data 2 153:</td>154:<td>155: This is data 3 156:</td>157:<td>158: This is data 4 159:</td>160:</tr>161:<tr>162:<td>163: This is data 1 164:</td>165:<td>166: This is data 2 167:</td>168:<td>169: This is data 3171:<td>172: This is data 4173:</td>174:</tr>175:<tr>176:<td>177: This is data 1178:</td>179:<td>180: This is data 2181:</td>182:<td>183: This is data 3184:</td>185:<td>186: This is data 4187:</td>188:</tr>189:</tbody>190:</table>191:<p>192:</p>193:<h1>194:最简单的flexigrid表格-2</h1>195:<table id="flexme2">196:<thead>197:<tr>198:<th width="100">199: Col 1200:</th>201:<th width="100">202: Col 2203:</th>204:<th width="100">205: Col 3 is a long header name 206:</th>207:<th width="300">208: Col 4209:</th>210:</tr>211:</thead>212:<tbody>213:<tr>215: This is data 1 with overflowing content 216:</td>217:<td>218: This is data 2219:</td>220:<td>221: This is data 3222:</td>223:<td>224: This is data 4225:</td>226:</tr>227:<tr>228:<td>229: This is data 1230:</td>231:<td>232: This is data 2233:</td>234:<td>235: This is data 3236:</td>237:<td>238: This is data 4239:</td>240:</tr>241:<tr>242:<td>243: This is data 1244:</td>245:<td>246: This is data 2247:</td>248:<td>249: This is data 3250:</td>251:<td>252: This is data 4253:</td>254:</tr>255:<tr>256:<td>257: This is data 1258:</td>259:<td>260: This is data 2 261:</td>262:<td>263: This is data 3 264:</td>265:<td>266: This is data 4 267:</td>268:</tr>269:<tr>270:<td>271: This is data 1 272:</td>273:<td>274: This is data 2 275:</td>276:<td>277: This is data 3 278:</td>279:<td>280: This is data 4 281:</td>282:</tr>283:<tr>284:<td>285: This is data 1 286:</td>287:<td>288: This is data 2 289:</td>290:<td>291: This is data 3 292:</td>293:<td>294: This is data 4 295:</td>296:</tr>297:<tr>298:<td>299: This is data 1 300:</td>301:<td>302: This is data 2 303:</td>304:<td>305: This is data 3 306:</td>307:<td>308: This is data 4 309:</td>310:</tr>311:<tr>312:<td>313: This is data 1 314:</td>315:<td>316: This is data 2 317:</td>318:<td>319: This is data 3 320:</td>321:<td>322: This is data 4 323:</td>324:</tr>325:<tr>326:<td>327: This is data 1 328:</td>329:<td>330: This is data 2 331:</td>332:<td>333: This is data 3 334:</td>335:<td>336: This is data 4 337:</td>338:</tr>339:<tr>340:<td>341: This is data 1 342:</td>343:<td>344: This is data 2 345:</td>346:<td>347: This is data 3348:</td>349:<td>350: This is data 4351:</td>352:</tr>353:<tr>354:<td>355: This is data 1356:</td>357:<td>358: This is data 2359:</td>360:<td>361: This is data 3362:</td>363:<td>364: This is data 4365:</td>366:</tr>367:<tr>368:<td>369: This is data 1370:</td>371:<td>372: This is data 2373:</td>374:<td>375: This is data 3376:</td>377:<td>378: This is data 4379:</td>380:</tr>381:</tbody>382:</table>为了增加FlexiGrid的基本使用效果，我们可以通过参数对其进行基本的调整自定义表头具体代码实现：1: <script type="text/javascript">2: $("document").ready(function() {3: $('#flexme1').flexigrid({4: colModel: [5: { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },6: { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },7: { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },8: { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true}, 9: { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' } 10: ]11: });12: $('#flexme2').flexigrid({13: colModel: [14: { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },15: { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },16: { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },17: { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true}, 18: { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' } 19: ],20: sortname: "iso",21: sortorder: "asc",22:23: });24: });25: </script>自定义折叠，自定义排序的实现1: <script type="text/javascript">2: $("document").ready(function() {3: $('#flexme1').flexigrid({4: colModel: [5: { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },6: { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },7: { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },8: { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true}, 9: { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' } 10: ], width: 700, height: 300, usepager: true, showTableToggleBtn: true, title: "点我折叠"11: });12: $('#flexme2').flexigrid({13: colModel: [14: { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },15: { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },16: { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },17: { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true}, 18: { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' } 19: ],20: searchitems: [21: { display: 'ISO', name: 'iso' },22: { display: 'Name', name: 'name', isdefault: true }23: ],24: sortname: "iso",25: sortorder: "asc",26: title: "我的测试效果",27: width: 700,28: height: 300,29: usepager: true, showTableToggleBtn: true, rp: 1030:31: });32: });33: </script>高级使用：1 分页要用到的存储过程1:CreatePROCEDURE [dbo].[spAll_ReturnRows]2: (3:SQL nVARCHAR(4000),4: Page int,5: RecsPerPage int,6: ID VARCHAR(255),7: Sort VARCHAR(255)8: )9:AS10:11:DECLARE Str nVARCHAR(4000)12:13:SET Str='SELECT TOP '+14:CAST(RecsPerPage ASVARCHAR(20))+15:' * FROM ('+SQL+') T WHERE T.'+16: ID+17:' NOT IN (SELECT TOP '+18:CAST((RecsPerPage*(Page-1)) ASVARCHAR(20))+19:' '+20: ID+21:' FROM ('22: +SQL+23:') T9 ORDER BY '+24: Sort+25:') ORDER BY '+26: Sort27:28:PRINT Str29:30:EXEC sp_ExecuteSql Str2 异步JSON数据传输实现1:using System;2:using System.Collections.Generic;3:using System.Configuration;4:using System.Data;5:using System.Data.SqlClient;6:using System.Linq;7:using System.Text;8:using System.Web;9:using System.Web.Services;10:using Newtonsoft.Json;11:12:namespace GridDemo13: {14:/// <summary>15:/// $codebehindclassname$ 的摘要说明16:/// </summary>17: [WebService(Namespace = "/")]18: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 19:publicclass GetDataSource4 : IHttpHandler20: {21:22:publicvoid ProcessRequest(HttpContext context)23: {24: context.Response.ContentType = "text/plain";25:26://得到当前页27:string CurrentPage = context.Request["page"];28://得到每页显示多少29:string PageShowLimit = context.Request["rp"];30://得到主键31:string TableID = context.Request["sortname"];32://得到排序方法33:string OrderMethod = context.Request["sortorder"];34:35://得到要过滤的字段36:string FilterField = context.Request["qtype"];37://得到要过滤的容38:string FilterFieldContext;39:if (context.Request.Form["letter_pressed"] == null)40: {41: FilterFieldContext = "";42: }43:else44: {45: FilterFieldContext = context.Request["letter_pressed"];46: }47://得到表的总行数48:string TableRowCount = SqlHelper.ExecuteScalar(ConfigurationManager.AppSettings["SQL2"],49: CommandType.Text,50:"select count(*) from Person.Address"51: ).ToString();52://得到主SQL53: SqlParameter SQL = new SqlParameter("SQL", SqlDbType.NVarChar);54://SQL.Value = "SELECT * FROM Person.Address";55:if (FilterFieldContext.Length == 0 || FilterField.Length == 0)56: {57: SQL.Value = "SELECT AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address";58: }59:else60: {61:string[] tmp = FilterField.Split(',');62: SQL.Value = "SELECT AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address where " + tmp[0] + " like '" + FilterFieldContext + "%'";63: }64:65:66: SqlParameter Page = new SqlParameter("Page", SqlDbType.Int);67: Page.Value = Convert.ToInt32(CurrentPage);68:69:70: SqlParameter RecsPerPage = new SqlParameter("RecsPerPage", SqlDbType.Int); 71: RecsPerPage.Value = Convert.ToInt32(PageShowLimit);72:73: SqlParameter ID = new SqlParameter("ID", SqlDbType.VarChar);74: ID.Value = TableID;75:76: SqlParameter Sort = new SqlParameter("Sort", SqlDbType.VarChar);77: Sort.Value = TableID;78:79://得到表80: DataTable returnTable =SqlHelper.ExecuteDataset(ConfigurationManager.AppSettings["SQL2"],81: CommandType.StoredProcedure, "spAll_ReturnRows",82:new SqlParameter[]83: {84: SQL,Page,RecsPerPage,ID,Sort85: }).Tables[0];86: context.Response.Write(DtToSON2(returnTable, CurrentPage, TableRowCount)); 87: }88:/// <summary>89:/// JSON格式转换90:/// </summary>91:/// <param name="dt">DataTable表</param>92:/// <param name="page">当前页</param>93:/// <param name="total">总计多少行</param>94:/// <returns></returns>95:publicstaticstring DtToSON2(DataTable dt, string page, string total)96: {97:98: StringBuilder jsonString = new StringBuilder();99: jsonString.AppendLine("{");100: jsonString.AppendFormat("page: {0},\n", page);101: jsonString.AppendFormat("total: {0},\n", total);102: jsonString.AppendLine("rows: [");103:104:for (int i = 0; i < dt.Rows.Count; i++)105: {106: jsonString.Append("{");107: jsonString.AppendFormat("id:'{0}',cell:[", dt.Rows[i][0].ToString()); 108:for (int j = 0; j < dt.Columns.Count; j++)109: {110:if (j == dt.Columns.Count - 1)111: {112: jsonString.AppendFormat("'{0}'", dt.Rows[i][j].ToString());113: }114:else115: {116: jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString());117: }118:119:if (j == dt.Columns.Count - 1)120: {121: jsonString.AppendFormat(",'{0}'", "<input type=\"button\" value=\"查看\" id=\"sss\" onclick=\"sss(" + dt.Rows[i][0].ToString() + ")\" />");122: }123:124: }125:126: jsonString.Append("]");127:if (i == dt.Rows.Count - 1)128: {129: jsonString.AppendLine("}");130:131: }132:else133: {134:135: jsonString.AppendLine("},");136: }137:138: }139:140: jsonString.Append("]");141: jsonString.AppendLine("}");142:143:return jsonString.ToString();144:145: }146:publicbool IsReusable147: {148: get149: {150:returnfalse;151: }152: }153: }154: }3 页面实现1: <% Page Language="C#" AutoEventWireup="true" CodeBehind="Complex-8.aspx.cs"Inherits="plex_8" %>2:3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">4: <html xmlns="/1999/xhtml">5: <head id="Head1" runat="server">6: <title></title>7: <link rel="stylesheet" type="text/css" href="/css/flexigrid/flexigrid.css" />8:9: <script type="text/javascript" src="/lib/jquery/jquery.js"></script>10:11: <script type="text/javascript" src="flexigrid.js"></script>12:13: <link type="text/css" rel="Stylesheet" href="facebox/facebox.css" />14: <link type="text/css" rel="Stylesheet" href="body.css" />15:16: <script type="text/javascript" src="facebox/facebox.js"></script>17:18: <script type="text/javascript">19: $("document").ready(function() {20: $("#flex1").flexigrid21: ({22: url: 'GetDataSource4.ashx',23: dataType: 'json',24: colModel: [25: { display: '地址ID', name: 'AddressID', width: 40, sortable: true, align: 'center'}, 26: { display: '具体地址1', name: 'AddressLine1', width: 140, sortable: true, align: 'left' },27: { display: '具体地址2', name: 'AddressLine2', width: 80, sortable: true, align:'left' },28: { display: '邮编', name: 'PostalCode', width: 80, sortable: true, align: 'left' }, 29: { display: '城市', name: 'City', width: 80, sortable: true, align: 'left' },30: { display: '操作', name: 'Opt', width: 80, sortable: true, align: 'left' }31: ],32: buttons: [33: { name: 'A', onpress: sortAlpha },34: { name: 'B', onpress: sortAlpha },35: { name: 'C', onpress: sortAlpha },36: { name: 'D', onpress: sortAlpha },37: { name: 'E', onpress: sortAlpha },38: { name: 'F', onpress: sortAlpha },39: { name: 'G', onpress: sortAlpha },40: { name: 'H', onpress: sortAlpha },41: { name: 'I', onpress: sortAlpha },42: { name: 'J', onpress: sortAlpha },43: { name: 'K', onpress: sortAlpha },44: { name: 'L', onpress: sortAlpha },45: { name: 'M', onpress: sortAlpha },46: { name: 'N', onpress: sortAlpha },47: { name: 'O', onpress: sortAlpha },48: { name: 'P', onpress: sortAlpha },49: { name: 'Q', onpress: sortAlpha },50: { name: 'R', onpress: sortAlpha },51: { name: 'S', onpress: sortAlpha },52: { name: 'T', onpress: sortAlpha },53: { name: 'U', onpress: sortAlpha },54: { name: 'V', onpress: sortAlpha },55: { name: 'W', onpress: sortAlpha },56: { name: 'X', onpress: sortAlpha },57: { name: 'Y', onpress: sortAlpha },58: { name: 'Z', onpress: sortAlpha },59: { name: '%', onpress: sortAlpha }60: ],61: searchitems: [62: { display: '城市', name: 'City' , isdefault: true},63: { display: '邮编', name: 'PostalCode' }64: ],65: usepager: true,66: title: '客户信息',67: useRp: true,68: rp: 10,69: showTableToggleBtn: true,70: width: 700,71: height: 200,72: rpOptions: [10, 15, 20, 25, 40, 60], //可选择设定的每页结果数73: procmsg: '请等待数据正在加载中…', //正在处理的提示信息74: resizable: false, //是否可伸缩75: sortname: "AddressID",76://sortorder: "asc",//此列由于存储过程原因无法用77: });78: });79: function sortAlpha() {80: jQuery('#flex1').flexOptions({ newp: 1, params: [{ name: 'letter_pressed', value: }, { name: 'qtype', value: $('select[name=qtype]').val()}] });81: jQuery("#flex1").flexReload();82: }83: function sss(data)84: {85: var temp=eval(data);86:// jQuery.facebox(temp);87: jQuery.facebox({ ajax: 'Default.aspx?id='+temp }) 88: }89: </script>90:91: </head>92: <body>93: <table id="flex1" style="display: none">94: </table>95: </body>96: </html>。

jquery+flexigrid使用方法

Jquery flexigrid使用使用技术：struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql 主要的js文件：jquery.js,flexigrid.js,query.js,thickbox.js,util.js其中：util.js是扩展flexigrid的功能，如条件查询用到的getQuery属性。

query.js是自定义的flexigrid界面显示和函数触发文件。

Jar包：使用过程：Struts2 jar只能用 2.1.6,web.xml中配置：<taglib><taglib-uri>struts-tags</taglib-uri><taglib-location>/WEB-INF/lib/struts2-core-2.1.6.jar</taglib-loca tion></taglib>用struts2-core-2.0.14会报错：org.apache.jasper.JasperException: Unable to initialize TldLocationsCache: nullJsp页面：引入jquery、flexigrid插件文件以及test.js，body中编写：<body><table id="grid"></table></body>在js文件中使用flexigrid创建页面: $(document).ready( function() {$("#grid").flexigrid( {// url :'jsp/query/json.json',url : 'getPaginationAction.action',dataType :'json',colModel : [ {display :'编号',name :'id',width :60,sortable :true,align :'center'}, {display :'姓',name :'firstname',width :120,sortable :true,align :'left'}, {display :'名',name :'lastname',width :120,sortable :true,align :'left'}, {display :'操作',name :'opt',width :120,sortable :true,align :'left',process :operate} ],searchitems : [ {display :'id',name :'id',isdefault :true}, {display :'姓',name :'firstname',isdefault :true}, {display :'名',name :'lastname',isdefault :true} ],// 右下方工具条按钮buttons : [ {name :'Add',bclass :'add',displayname :'增加',onpress :test,separator :true}, {name :'Delete',bclass :'delete',displayname :'删除',onpress :test}, {name :'Modify',bclass :'modify',displayname :'修改',onpress :test} ],sortname :"id",sortorder :"asc",striped :true,usepager :true,resizable: true,title :'人员管理',useRp :true,total :10,rp :2,pagestat :'显示 {from} 到 {to} 条，共{total}条记录', procmsg :'加载中, 请稍等 ...',showTableToggleBtn :true,rpOptions : [ 2, 5, 10, 15, 20 ],// 可选择设定的每页结果数width :1000,height :300,getQuery :getQuery});});条件筛选查询时使用的：Form id=“search”;查询按钮的id为dosearch:<input name=""type="button"class="btn-search2"value="查询"id="dosearch"/>Flexigrid插件中getQuery属性对应页面上部“更多高级选项”处的“查询”，也是点击树形菜单“角色授权”执行过程是相同的。

Django+layui实现列表页的增删改查以及分页功能---列表页展示

Django+layui实现列表页的增删改查以及分页功能---列表页展⽰背景：需要做⼀个列表页，管理内部所有链接思路：先⽤前端画出列表页，然后实现列表的功能列表页：layui⾃带的⽅法渲染，不需要过多的HTML直接JS渲染功能：新增、删除、查看、编辑、搜索、分页功能实现：前端数据提供给后端处理，渲染返回结果⾸先，上⼀段前端代码，具体解析在页⾯中有注释----- 更新数据库提供下拉选项功能{% extends 'lblb/basePage.html' %}<head><meta charset="UTF-8"></head><body>{% block content %}<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend><p>动态添加列表页⾯</p></legend></fieldset>{#功能区：搜索、新增#}{#列表内容：删除、修改先完成列表内容部分，#}{# 点击新增按钮，弹出⼀个弹窗#}{# 填写信息后，提交给后端，后端写⼊数据库，并且返回给前端#}{# 前端每次刷新页⾯都会请求到数据库中的数据#}<blockquote class="layui-elem-quote"><div class="layui-row"><form class="layui-form layui-col-md12 x-so" id="complain_search"><div class="layui-col-md3">ID:<div class="layui-input-inline"><input type="text" name="serviceCode" id="serviceCode"placeholder="请输⼊ID" autocomplete="off" class="layui-input"></div></div><div class="layui-col-md3">环境:<div class="layui-input-inline"><select name="env" id="env"><option value="">---请选择---</option></select></div></div><div class="layui-col-md3">服务端:<div class="layui-input-inline"><select name="serverType" id="serverType"><option value="">---请选择---</option></select></div></div><div class="layui-col-md3">国家/地区:<div class="layui-input-inline"><select name="countryArea" id="area"><option value="">---请选择---</option></select></div><button id="search" class="layui-btn layui-btn-normal" lay-submitlay-filter="linkSearch"><i class="layui-icon"></i></button><input type="reset" class="layui-btn layui-btn-normal" value="重置"></div></form></div><table class="layui-hide" id="linkTable" lay-filter="linkList"></table>{# 列表页实现，使⽤layui推荐的⽅法渲染#}</blockquote><script type="text/html" id="add_event">{# 功能按钮，通过lay-event绑定 eg：lay-event="add_link"#}<div class="layui-btn-container"><button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add_link"><i class="layui-icon"> 添加</i></button><button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete_link"> 批量删除</button></div></script><script type="text/html" id="optsBar"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script><script type="text/javascript">e(['table', 'layer', 'form', 'laypage'], function () {var table = layui.table,layer = yer,form = layui.form,laypage = ypage;var tableIns = table.render({ // 列表页渲染id: "linkReload", //⽆所谓，需要需search联动elem: '#linkTable' //需要渲染的元素，表格元素, url: '{% url "getLinkList" %}' //渲染的数据源，由接⼝提供, page: true// 开启分页功能, method: 'get', height: 550 //固定表格⾼度，超过，则显⽰scroll, toolbar: '#add_event' //新增设置为toolbar, limit: 10 //默认每页10条, limits: [5, 10, 20, 30] // 分页选项, even: true//设置隔⾏背景, response: {// 后端数据格式，接⼝返回数据statusName: 'code',msgName: 'msg',statusCode: 200,dataName: 'data',countName: 'count',}, request: {//前端请求参数；数据传给后端接⼝处理pageName: 'page',limitName: 'size'}, cols: [// 表格数据[{checkbox: true}//开启多选框, {field: 'id', width: 150, title: 'ID', templet: function (data) {return Y_INDEX}}, {field: 'env', width: 150, title: '环境', templet: function (data) {if (data.env == "正式环境") {return '<span style="color: #D03948;">正式环境</span>';} else if (data.env == "P环境") {return '<span style="color: #18A4D0;">P环境</span>';} else if (data.env == "测试环境") {return '<span style="color: #5CD03F;">测试环境</span>';}}}, {field: 'server', width: 150, title: '服务端', templet: function (data) {return '<span>' + data.server + '</span>'}}, {field: 'area', width: 150, title: '国家/地区', templet: function (data) {return '<span>' + data.area + '</span>'}}, { // , edit: 'text' 开启单元格编辑field: 'link_details', width: 300, title: 'linkUrl', templet: function (data) {return '<a href="' + data.link_details + '" target="_blank"><u style="color: #0000FF;">' + data.link_details + '</u></a>'; }}, {fixed: 'right', title: '操作', toolbar: '#optsBar'}]});$.ajax({{# ajax请求searchEnvApi接⼝，返回对应的下来选项，在前端下拉框中显⽰ #}type: "get",url: "{% url 'searchEnvApi' %}",dataType: "json",contentType: "application/json; charset=utf-8",success: function (data) {for (let index = 0; index < data.data.length; index++) {let dataTemp = data.data[index];if (dataTemp.value == "env") {$("#env").append(new Option(dataTemp.descriptions));} else if (dataTemp.value == "server") {$("#serverType").append(new Option(dataTemp.descriptions))} else if (dataTemp.value == "area") {$("#area").append(new Option(dataTemp.descriptions))}}form.render();}});table.on('toolbar(linkList)', function (obj) {var checkStatus = table.checkStatus(obj.config.id),data = checkStatus.data;data = eval("(" + JSON.stringify(data) + ")");switch (obj.event) {case 'add_link': // lay-event⾃定义的新增按钮toolbar事件layer.open({type: 2,title: "新增地址链接操作",area: ['450px', '800px'],fix: false,maxmin: true,shadeClose: true,shade: 0.4,{#skin: 'layui-layer-normal',#}skin: 'layui-layer-rim',content: ["{% url 'addLink' %}", "no"], // 新增链接，窗⼝页⾯btn: ['提交', '取消'],yes: function (index, layero) {// 从iframe中拿到data，获取post数据var json_data = $(layero).find("iframe")[0].contentWindow.callbackdata();$.ajax({url: "{% url 'addLinkApi' %}", // 新增链接窗⼝中的数据处理type: "post",datatype: "json",data: json_data,async: false,cache: true,success: function () {// 刷新太快了，新增接⼝，network中没有返回数据window.location.reload();}});layer.close(index);}});break;case 'delete_link':// 获取勾选了的CheckBox对应的id->vals⾥⾯var vals = new Array();$("td .layui-form-checked").parents("tr").children('[data-field=id]').each(function () {vals.push($(this).text());console.log(vals);});if (vals.length == 0) { // 未勾选时，提⽰layer.open({title: "提⽰", content: "请选择需要删除的数据"});return false}layer.confirm("确定要全部删除吗？", {btn: ["确定", "取消"],yes: function (index) {var vals = new Array();$("td .layui-form-checked").parents("tr").children('[data-field=id]').each(function () { vals.push($(this).attr("data-content"));console.log(vals);});$.ajax({url: "{% url 'deleteLinkMore' %}" // 批量删除接⼝, type: "post", datatype: "json", success: function () {parent.location.reload() // 删除成功后刷新页⾯}})},});};});table.on('tool(linkList)', function (obj) {// 获取tool⾏数据，这⾥⽤来提供数据var data = obj.data;var json = JSON.stringify(data);switch (obj.event) {case 'detail':console.log("链接详情");var oldValues = []; // 存储当前⾏数据$.each(data, function (key, value) {if (key != 'id') {oldValues.push(value);}});var index = layer.open({type: 2,title: "链接详情页⾯",area: ['450px', '800px'],fix: false,maxmin: true,shadeClose: true,{#value: {"env": json.env},#}shade: 0.4,skin: 'layui-layer-rim',content: ["{% url 'linkRead' %}", "no"], // 链接详情页success: function (layero, index) {// 将列表页中选中⾏的数据oldValues，注⼊到iframe页⾯中对应的input框⾥var body = layer.getChildFrame('body', index);var iframeWindow = $(layero).find("iframe")[0].contentWindow; // 获取当前iframe页⾯var inputList = body.find("input");console.log(inputList, "inputlist")for (var i = 0; i < inputList.length; i++) {$(inputList[i]).val(oldValues[i])}console.log(inputList)}});break;case 'edit':console.log("编辑链接")var field = obj.field, data = obj.data;console.log(1, data)var oldValues = [];$.each(data, function (name, value) { // 获取编辑⾏的原始数据oldValues.push(value);});console.log(2, oldValues);var index = layer.open({type: 2,title: "编辑链接页⾯",area: ['450px', '800px'],fix: false,maxmin: true,shadeClose: true,shade: 0.4,skin: 'layui-layer-rim',btn: ["编辑", "取消"],content: ["{% url 'linkEdit' %}", "no"],yes: function (index, layero) {// 将data传到编辑页⾯，然后，编辑页⾯将对应的id和修改后的数据⼀同传给后端{#$('[lay-value="CA"]').click()#}let json_data = $(layero).find("iframe")[0].contentWindow.callbackEditData(data);console.log(5, json_data);{#pause#}$.ajax({url: "{% url 'editLinkApi' %}" // 处理编辑数据，这⾥与查看不⼀样, type: "post", async: false, cache: false, data: json_data, dataType: "json"});layer.close(index);},success: function (layero, index) {var body = layer.getChildFrame('body', index); // 获取当前iframe页⾯的bodyvar iframeWindow = $(layero).find("iframe")[0].contentWindow; // 获取当前iframe页⾯var inputList = body.find('input');for (var i = 0; i < inputList.length; i++) {$(inputList[i]).attr("value", oldValues[i + 1]); //遍历⼦窗⼝的input标签，将之前数组中的值⼀次放⼊显⽰ {#$(inputList[i]).val(oldValues[i + 1]); //遍历⼦窗⼝的input标签，将之前数组中的值⼀次放⼊显⽰#}}}});break;case 'del':var delIndex = layer.confirm('真的删除id为' + data.id + "的信息吗?", function (delIndex) {$.ajax({url: '{% url "deleteLink" %}' + data.id, // 单个删除，By_idtype: "post",success: function (suc) {if (suc.code == 200) {{#obj.del(); //删除对应⾏（tr）的DOM结构，并更新缓存#}layer.msg("删除成功", {icon: 1});window.location.reload()} else {layer.msg("删除失败", {icon: 5});}}});layer.close(delIndex);});break;}});form.render();form.on('submit(linkSearch)', function (data) {// 查询，获取表单数据var formData = data.field;var id = formData.serviceCode,env = formData.env,server = formData.serverType,area = formData.countryArea;table.reload('linkReload', {page: {curr: 1},where: { // 查询条件id: id,env: env,server: server,area: area},method: 'post',contentType: "application/json;charset=utf-8",url: '{% url "searchLink" %}', // 后端处理});return false;});});</script>{% endblock %}</body>View Code。

单表操作的增删改查开发流程

1，建立单表维护模块需要维护的实体详见增删改查模块的表单配置开发模式中的建实体2，填写配置文件1）.配置system-PortletEntities.xml文件，建立栏目，拷贝一段已有的配置代码<portletEntity><name>pygl.szpkxnxqsj</name><portlet-name>pygl.szpkxnxqsj</portlet-name><title>设置排课学年学期时间</title><description>设置排课学年学期时间</description><keywords>设置排课学年学期时间</keywords></portletEntity>修改其中的name、portlet-name、title、description、keywords五个属性。

填写你需要的开发的模块的信息2）.配置portlet.xml文件，实现栏目，拷贝一段已有的配置代码，如：<portlet><portlet-name>pygl.szpkxnxqsj</portlet-name><display-name>设置排课学年学期时间</display-name><portlet-class>org.springframework.web.portlet.DispatcherPortlet</portlet-class><init-param><name>contextConfigLocation</name><value>/WEB-INF/portlet-config/pkcssz/pygl.szpkxnxqsj.xml</value></init-param><supports><mime-type>text/html</mime-type><portlet-mode>view</portlet-mode></supports><portlet-info><title>设置排课学年学期时间</title></portlet-info></portlet>修改其中<portlet-name>、<title>、<display-name>分别和system-PortletEntities.xml中配置的<portlet-name>、<title>、<description>严格一致，不然之后搜索栏目，配置成功后栏目中找不到相应的内容。

FlexiGrid配置与使用

JQuery 插件FlexiGrid 之完全配置与使用首先.去下载FlexGrid /下载完成后.解压开有__MACOSX和flexigrid两个文件夹主要使用flexigrid里面的文件flexgrid文件夹下文件如下..准备工作完成后真正工作开始了在MyEclipse下新建Web project..把flexigrid包下所有的文件拷贝到WebRoot/下新建*.jsp页面body体中加入Jsp代码1.<table id="flex1" style="display:none"></table>做完flexigrid控件的显示容器. 没有则不会显示控件页面引入控件代码Javascript代码1.<table id="flex1" style="display:none"></table>2. <input id="hidden" type="hidden" name="hidden" value="null" />3. <script>4. $("#flex1").flexigrid5. (6. {7. url: '../ReleaseInfoServlet?hidden=manage',8. dataType: 'json',10. {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center', hide: false},11. {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'cent er'},12. {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'ce nter'},13. {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'ce nter'},14. 15. {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'cente r'},16. {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'cent er'}17. ],18. buttons : [19. {name: '添加', bclass: 'add', onpress : button},20. {name: '删除', bclass: 'delete', onpress : button},21. {name: '修改', bclass: 'modify', onpress : button},22. {separator: true}23. ],24. searchitems : [25. {display: '信息编号', name : 'RINO', isdefault: true},26. {display: '信息标题', name : 'RITITLE'},27. {display: '信息类别', name : 'IC.ICNAME'},28. {display: '发布作者', name : 'RIAUTHOR'}29. ],30. sortname: "RINO",31. sortorder: "desc",32. usepager: true,33. title: '信息发布管理',35. rp: 20,36. showTableToggleBtn: true,37. width: 780,38. height: 30039. }40. );41.42. function button(com,grid)43. {44. if (com=='删除')45. {46. ${"hidden"}.value="delete";47. if($('.trSelected',grid).length==0){48. alert("请选择要删除的数据");49. }else{50. if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?'))51. {52. var id ="";53. for(var i=0;i<$('.trSelected',grid).length;i++){54. if(i==$('.trSelected',grid).length-1){55. id += "id="+$('.trSelected',grid).find("td:first").eq(i).text();56. } else {57. id += "id="+$('.trSelected',grid).find("td:first").eq(i).text()+"&";58. }59. }60. window.location.href="../ReleaseInfoServlet?hidden="+${"hidden"}.value+"&"+id;61. }62. }63. }64. else if (com=='添加')65. {66. ${"hidden"}.value="add";67. window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value;68. }69. else if (com=='修改')70. {71. ${"hidden"}.value="modify";72. if($(".trSelected").length==1){73. window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value+"&id="+$('.trSelected',grid).find("td").e q(0).text();74. }else if($(".trSelected").length>1){75. alert("请选择一个修改,不能同时修改多个");76. }else if($(".trSelected").length==0){77. alert("请选择一个您要修改的新闻信息")78. }79. }80. }flexgrid参数介绍:Javascript代码1.height: 200, //flexigrid插件的高度，单位为px2.width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算3.striped: true, //是否显示斑纹效果，默认是奇偶交互的形式4.novstripe: false,5.minwidth: 30, //列的最小宽度6.minheight: 80, //列的最小高度7.resizable: true, //是否可伸缩8.url: false, //ajax方式对应的url地址9.method: ‘POST’, // 数据发送方式10.dataType: ‘xml’, // 数据加载的类型11.errormsg: ‘Connection Error’,//错误提升信息epager: false, //是否分页13.nowrap: true, //是否不换行14.page: 1, //默认当前页15.total: 1, //总页面数eRp: true, //是否可以动态设置每页显示的结果数17.rp: 15, // 每页默认的结果数18.rpOptions: [10,15,20,25,40],//可选择设定的每页结果数19.title: false,//是否包含标题20.pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式21.procmsg: ‘Processing, please wait …’,//正在处理的提示信息22.query: ”,//搜索查询的条件23.qtype: ”,//搜索查询的类别24.nomsg: ‘No items’,//无结果的提示信息25.minColToggle: 1, //minimum allowed column to be hidden26.showToggleBtn: true, //show or hide column toggle popup27.hideOnSubmit: true,//隐藏提交28.autoload: true,//自动加载29.blockOpacity: 0.5,//透明度设置30.onToggleCol: false,//当在行之间转换时31.onChangeSort: false,//当改变排序时32.onSuccess: false,//成功后执行33.onSubmit: false // 调用自定义的计算函数注意:Head标签必须要引入Jsp代码1.<link rel="stylesheet" href="css/flexigrid/flexigrid.css"2. type="text/css"></link>3.<script type="text/javascript" src="lib/jquery/jquery.js"></script>4.<script type="text/javascript" src="js/flexigrid.js"></script>jquery.js、flexigrid.css、flexigrid.js三个主要文件自己要根据自己的文件路径.去引入css\js文件页面完成启动tomcat测试页面会不会显示控件.应该是没有问题的,只是没有数据主要的还是后台的操作这里由于时间关系只介绍select方法了.可以看到flex无刷新的路径是一个servlet.看看servlet做了些什么?Java代码1.response.setContentType("text/html;charset=UTF-8");2.ReleaseInfoDao rid = new ReleaseInfoDao();3.String hidden = request.getParameter("hidden");4.PrintWriter out = response.getWriter();首先接收路径传过来的hidden值.因为后面我会根据hidden值做各种操作.所以url重写了一些字段.大家可以不用如此.Java代码1.if(hidden.equals("manage")){2.// 获得当前页数3. String pageIndex = request.getParameter("page");4.// 获得每页数据最大量5. String pageSize = request.getParameter("rp");6.// 获得模糊查询文本输入框的值7. String query = new String(request.getParameter("query").getBytes("ISO8859-1"),"UTF-8");8.// 获得模糊查询条件9. String qtype = request.getParameter("qtype");10. if(query==""||("").equals(query)){11. Map pageInfo = new HashMap();12. pageInfo.put("page", pageIndex);13. pageInfo.put("total", rid.getReleaseInfoCount());14.// 数据JSON格式化15. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageS ize)), pageInfo);16.// response相关处理17. response.setContentType("html/txt");18. response.setCharacterEncoding("utf-8");19. response.setHeader("Pragma", "no-cache");20. response.setHeader("Cache-Control", "no-cache,must-revalidate");21. response.setHeader("Pragma", "no-cache");22. try {23. response.getWriter().write(jsonStr);24. response.getWriter().flush();25. response.getWriter().close();26. } catch (IOException e) {27. e.printStackTrace();28. }29. }else{30. Map pageInfo = new HashMap();31. pageInfo.put("page", pageIndex);32. pageInfo.put("total", rid.getReleaseInfoCountLike(qtype, query));33.// 数据JSON格式化34. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfoLike(Integer.parseInt(pageIndex), Integer.parseInt(p ageSize), qtype, query), pageInfo);35.// response相关处理36. response.setContentType("html/txt");37. response.setCharacterEncoding("utf-8");38. response.setHeader("Pragma", "no-cache");39. response.setHeader("Cache-Control", "no-cache,must-revalidate");40. response.setHeader("Pragma", "no-cache");41. try {42. response.getWriter().write(jsonStr);43. response.getWriter().flush();44. response.getWriter().close();45. } catch (IOException e) {46. e.printStackTrace();47. }48. }49. }可以看到许多request.getParameter("***");是后去flexigrid控件的一些参数.大家可以到flexigrid.js文件里面看到这些参数.page//获取当前的页数.rp//每页显示多少行数据Javascript代码1.rp: 20,query//点击放大镜出现搜索功能,是Input文本框的值qtype//是搜索功能后面的select的值根据query的操作判断是模糊查询还是全部查询数据.Servlet全部代码看完了.看看.Dao层的数据层的代码吧.主要引用Dao的代码如下主要代码1.Java代码1.pageInfo.put("total", rid.getReleaseInfoCount());2.String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo) ;rid为ReleaseInfoDao的实例对象(发布信息表)首先我们来看getReleaseInfoCount()方法Java代码1./**2. * 获得信息表所有的数据量,3. * 并返回数据个数4. * @return5. */6. public long getReleaseInfoCount(){7. long count =0l;8. QueryRunner queryRunner = new QueryRunner();9. String query = "select count(*) as num from TB_ReleaseInfo";10. try {11. Map map = (Map)queryRunner.query(DBConnection.getConnection(), query, new MapHandler());12. count = Long.parseLong(map.get("num").toString());13. } catch (SQLException e) {14. e.printStackTrace();15. } finally {16. DBConnection.close();17. }18. return count;19. }主要代码2.Java代码1.String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);这里看到返回的是json格式的数据主要Dao层方法为creReleaseInfoJSON();getReleaseInfo(int pageIndex,int pageSize);方法getReleaseInfo代码如下Java代码1./**2. * 分页查询3. * @param pageIndex4. * @param pageSize5. * @return6. */7. public List getReleaseInfo(int pageIndex,int pageSize){8. List releaseInfoList = new ArrayList();9. int beginIndex = (pageIndex-1)*pageSize;10. int endIndex = pageIndex*pageSize;11. QueryRunner queryRunner = new QueryRunner();12. String query = "select * from (" +13. "select rownum rn,rino,rititle,ritype,icname,rihotpoint,ricontent,ridate,riauthor " +14. "from (" +15. "select ri.rino,ri.rititle,ri.ritype,ic.icname,ri.rihotpoint,ri.ricontent,ri.ridate,ri.riauthor" +16. " from TB_ReleaseInfo ri ,TB_InfoCategroy ic where ri.ritype = ic.icno " +17. "order by ri.rino desc) where rownum<=?) wherern>?";18. try {19. releaseInfoList = (List)queryRunner.query(DBConnection.getConnection(), query,new Object[]{new Integer(endIndex),n ew Integer(beginIndex)},new MapListHandler());20. } catch (SQLException e) {21. e.printStackTrace();22. } finally {23. DBConnection.close();24. }25. return releaseInfoList;26. }上述方法的SQL为Oracle的分页查询.MS SQL、MySql等.其他数据库不适用. creReleaseInfoJSON代码如下:Java代码1./**2. * 数据JSON格式化3. * @param list4. * @param pageInfo5. * @return6. */7. public String creReleaseInfoJSON(List list,Map pageInfo){8. String jsonStr = "";9. List mapList = new ArrayList();10. for(int i=0;i<list.size();i++){11. Map cellMap = new HashMap();12. cellMap.put("id", ((Map)list.get(i)).get("RINo").toString());13. cellMap.put("cell", new Object[]{14. ((Map)list.get(i)).get("RINo"),15. ((Map)list.get(i)).get("RITitle"),16. ((Map)list.get(i)).get("ICName"),17. ((Map)list.get(i)).get("RIHotpoint"),18. ((Map)list.get(i)).get("RIDATE"),19. ((Map)list.get(i)).get("RIAuthor")20. });21. mapList.add(cellMap);22. }23. pageInfo.put("rows", mapList);24. JSONObject object = new JSONObject(pageInfo);25. jsonStr = object.toString();26. return jsonStr;27. }返回的JSON格式的数据:Java代码1.jsonStr{"total":3,"page":"1","rows":[{"id":"8","cell":[8,"啊啊","什么玩意","否","2009-06-24 14:30:11","admin"]},{"id":"7","cell":[7,"来挑心底1","媒体声音","是","2009-06-24 14:29:55","admin"]},{"id":"3","cell":[3,"新茶品","最热新闻","否","2009-06-24 13:55:00","admin"]}]}引用地址:/blog/414611。

实验训练3数据增删改操作

实验训练3数据增删改操作单击“Select rows”弹出下图，进行插入。

用同样的办法，完成其它7个表的插入。

（2）使用带Select的Insert语句完成汽车配件表Autoparts中数据的批量追加；并通过select语句检查插入前后的记录情况。

Autoparts表批量插入前；使用带Select的Insert语句批量增加，命令如下。

insert into autoparts select * from autopartscopy11;批量增加后，如下图。

用同样的方法，完成其它7个表的批量插入。

【实验3-2】删除数据（1）使用Delete语句分别完成购物车表shoppingcart、订单表Order、订单明细表Order_has_Autoparts、评论Comment的数据删除，删除条件自定；并通过select语句检查删除前后的记录情况。

删除前shoppingcart的情况。

使用Delete语句删除后表shoppingcart的情况，第二行没有了。

输入命令：delete from ShoppingCart where Autoparts_apid=2;用同样的办法，完成其它表的删除。

（2）使用TRUNCATE TABLE语句分别完成购物车表shoppingcart、评论Comment 的数据删除。

删除前shoppingcart的情况。

使用TRUNCATE TABLE语句删除后shoppingcart的情况。

输入命令：TRUNCATE TABLE ShoppingCart;执行结果如下。

【实验3-3】修改数据使用Update分别完成汽车配件表Autoparts、商品类别表category、用户表Client、用户类别表Clientkind、购物车表shoppingcart、订单表Order、订单明细表Order_has_Autoparts、评论Comment的数据修改，修改后数据值自定，修改条件自定；并通过select语句检查修改前后的记录情况。

FlexiGrid使用手册

FlexiGrid使用手册一、概览Flexigrid是一个基于jQuery开发的Grid，与 Ext Gird类似。

Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

它的功能包括：♦调整列宽♦合并列标题♦自定义查找♦隐藏列♦隔行变色♦行扩展事件♦动态注册外部参数♦分页♦排序♦显示/隐藏表格等。

二、环境准备首先.去官网/下载FlexiGrid .下载完成后,解压缩文件得到如下目录结构：flexigrid-1.1+css+images+bg.gif+btn-sprite.gif+…+flexigrid.css+flexigrid.pack.css+js+flexigrid.js+flexigrid.pack.js其中css文件夹为FlexiGrid的css样式表文件及所需的图片，js文件夹为FlexiGrid的js文件三、实例1.在MyEclipse下新建Web project,命名为flexiGridDemo2.把FlexiGrid包下所有的文件拷贝到WebRoot下3.修改index.jsp页面1)将FlexiGrid的样式表文件和js文件引入到页面<link href="css/flexigrid.css" type="text/css" rel="stylesheet" /><script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="js/jquery.flexigrid.js" type="text/javascript"></script>2)在<body>中增加FlexiGrid的容器<div id="ptable" style="margin: 10px"><table id="flexTable" style="display: none"></table></div>3）编写生成FlexiGrid的js代码：<script type="text/javascript">$(document).ready(function(){var grid=$("#flexTable").flexigrid({width: 760,height: 280,url: 'flexGridServlet.do',dataType: 'json',colModel : [{display: '编号',name : 'id',width : 50,sortable : true,align: 'center',hide: false,toggle : false},{display: '工作名称',name : 'job_name',width : 250,sortable : false,align: 'center'},{display: '工作地址',name : 'work_address',width : 100,sortable : true,align: 'center'},{display: '工资',name : 'salary',width : 60,sortable : true,align: 'right',process:formatMoney},{display: '日期',name : 'date',width : 120,sortable : true,align: 'center'},{display: '语言',name : 'language',width : 80,sortable : true,align: 'center'}],buttons : [{name: 'add',displayname: '新增',bclass: 'add',onpress: toolbarItem},{separator: true},{ name: 'modify',displayname: '修改',bclass: 'modify',onpress: toolbarItem},{separator: true},{ name: 'delete',displayname: '删除',bclass: 'delete',onpress: toolbarItem}],searchitems : [{display: '编号', name : 'id', isdefault: true},{display: '工作名称', name : 'job_name'},{display: '工作地址', name : 'work_address'},{display: '语言', name : 'language'}],errormsg: '发生异常',sortname: "id",sortorder: "desc",usepager: true,title: '信息发布管理Flexigrid',pagestat: '显示记录从{from}到{to}，总数{total}条',useRp: true,rp: 10,rpOptions: [10, 15, 20, 30, 40, 100],nomsg: '没有符合条件的记录存在',minColToggle: 1,showTableToggleBtn: true,autoload: true,resizable: false,procmsg: '加载中, 请稍等 ...',hideOnSubmit: true,blockOpacity: 0.5,showcheckbox: true,gridClass: "bbit-grid",rowhandler: false,rowbinddata: true,onrowchecked: callme});function callme(){alert("选中了");}function toolbarItem(com, grid) {if (com=='delete'){deleteMe();}else if (com=='add'){openDialogAdd();}else if (com=='modify'){openDialogModify();}}//操作函数function formatMoney(value, pid) {return "￥" + parseFloat(value).toFixed(2);}function openDialogAdd(){}function openDialogModify(){}function deleteMe(){}});</script>4)编写后台代码response.setContentType("text/html");response.setCharacterEncoding("utf-8");response.setHeader("Pragma", "no-cache");response.setHeader("Cache-Control", "no-cache, must-revalidate"); response.setHeader("Pragma", "no-cache");String sql = "";// 当前第几页String pageIndex = request.getParameter("page");// 每页多少条String pageSize = request.getParameter("rp");// 条件字段值ֵString query = newString(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8"); // 条件字段String qtype = request.getParameter("qtype");// 排序字段String sortname = request.getParameter("sortname");// desc or ascString sortorder = request.getParameter("sortorder");// 操作符String qop = request.getParameter("qop");int count = 0;List list = null;try {sql = "select count(*) from job_info1" ;if (!query.equals("")) {sql += " where " + qtype + " like " + "'%" + query + "%'";}count = db.executeQuery(sql);sql = "select * from job_info1";if (!query.equals("")) {sql += " where " + qtype + " like " + "'%" + query + "%'";}sql += " order by " + sortname + " " + sortorder;sql += " limit " + ((Integer.parseInt(pageIndex) - 1) *Integer.parseInt(pageSize)) + "," + pageSize;list = db.executeQueryList(sql);if (list == null) {System.out.println("======出错啦======");return;}} catch (Exception e) {e.printStackTrace();}Map map = new HashMap();map.put("page", pageIndex);map.put("total", count + "");// to JSONString json = toJSON(list, map);response.getWriter().write(json);response.getWriter().flush();response.getWriter().close();5）配置web.xml<servlet><servlet-name>flexGridServlet</servlet-name><servlet-class>servlet.FlexiGridServlet</servlet-class></servlet><servlet-mapping><servlet-name>flexGridServlet</servlet-name><url-pattern>/flexGridServlet.do</url-pattern></servlet-mapping>6)sql脚本CREATE TABLE `job_info1` (`id` int(11) NOT NULL AUTO_INCREMENT,`job_name` varchar(255) DEFAULT NULL,`date` varchar(255) DEFAULT NULL,`work_address` varchar(255) DEFAULT NULL,`salary` varchar(255) DEFAULT NULL,`language` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=163 DEFAULT CHARSET=gbk;INSERT INTO job_info1 VALUES ('3', '我的名声', '2009-12-04', '2009', '30.01', '英文'); INSERT INTO `job_info1` VALUES ('14', '14', '2009-12-05', '14io', '14.51', '英文'); INSERT INTO `job_info1` VALUES ('15', '15', '15', '15', '15.2', '中文');INSERT INTO `job_info1` VALUES ('111', '111', '2009-12-04', '111', '12.2', '中文'); INSERT INTO `job_info1` VALUES ('116', 'qqq', '2009-12-01', 'www', '11.00', '英文'); INSERT INTO `job_info1` VALUES ('120', '12', '2009-12-15', '12', '3234.00', '中文'); INSERT INTO `job_info1` VALUES ('121', '我的k', '2009-12-04', '说到底', '10000', '英文'); INSERT INTO `job_info1` VALUES ('122', '我的kk', '2009-12-04', '啊可怜的', '10', '英文'); INSERT INTO `job_info1` VALUES ('123', '去1', '2009-12-07', 'iwio', '10', '英文'); INSERT INTO `job_info1` VALUES ('124', '1噢o', '2009-12-08', '2030', '1900', '中文'); INSERT INTO `job_info1` VALUES ('129', '其实', '2009-12-08', '阿斯科', '221', '英文'); INSERT INTO `job_info1` VALUES ('131', '其实', '2009-12-08', '阿斯科', '221', '英文'); INSERT INTO `job_info1` VALUES ('134', '世界', '2009-12-08', '东方方法', '14.00', '中文'); INSERT INTO `job_info1` VALUES ('135', '就啊是', '2009-12-08', '可看到', '22.00', '英文'); INSERT INTO `job_info1` VALUES ('136', '就啊是', '2009-12-08', '阿斯', '22.00', '中文'); INSERT INTO `job_info1` VALUES ('137', '世康', '2009-12-08', '萨芬成都市', '123', '英文'); INSERT INTO `job_info1` VALUES ('138', '显示卡', '2009-12-08', '收到反看', '123', '中文'); INSERT INTO `job_info1` VALUES ('139', '1东方法', '2009-12-08', '244ss', 'www', '中文'); INSERT INTO `job_info1` VALUES ('140', '发卡量', '2009-12-08', 'w', '45', '中文'); INSERT INTO `job_info1` VALUES ('141', '晚上', '2009-12-10', '时间', '100', '英文'); INSERT INTO `job_info1` VALUES ('142', '阿克接口', '2009-12-10', '问问', '10', '英文'); INSERT INTO `job_info1` VALUES ('143', 'wwwree', '2009-12-10', '23', '300.00', '英文');INSERT INTO `job_info1` VALUES ('144', '111', '2009-12-10', '122', '12.00', '中文');INSERT INTO `job_info1` VALUES ('145', '23456', '2009-12-10', '山东省', '1211', '英文');INSERT INTO `job_info1` VALUES ('146', '请求权', '2009-12-25', '2111', '11112', '英文');INSERT INTO `job_info1` VALUES ('148', '12112', '2009-12-10', '3', '22', '中文');INSERT INTO `job_info1` VALUES ('149', '222', '2009-12-10', '121', '2121', '中文');INSERT INTO `job_info1` VALUES ('150', '失算', '2009-12-10', '却完全', '1', '中文');7）启动tomcat测试页面四、API详解1.FlexiGrid属性：height:默认值200, flexigrid的高度，单位为pxwidth:默认值'auto', flexigrid的宽度，auto表示根据每列的宽度自动计算striped:默认值true, 是否显示斑纹效果，默认是奇偶交互的形式novstripe:默认值false,是否显示垂直分隔条，默认显示minwidth:默认值30, flexigrid列的最小宽度minheight:默认值80, flexigrid列的最小高度resizable:默认值false, 是否可调整大小url:默认值false, ajax方式获取数据对应的url地址method:默认值'POST', 数据发送方式dataType:默认值'json', 数据加载的类型，xml,jsonerrormsg:默认值'发生错误', 错误提升信息usepager:默认值false, 是否显示分页条nowrap:默认值true, 是否不换行page:默认值1, 默认当前页total:默认值1,总页数useRp:默认值true, 是否可以动态设置每页显示的结果数rp:默认值25,默认每页显示的结果数rpOptions:默认值[10, 15, 20, 25, 40, 100], 可选择设定的每页结果数title:默认值false,标题pagestat:默认值'显示记录从{from}到{to}，总数{total} 条', 显示当前页和总页面的样式procmsg:默认值'正在处理数据，请稍候...', 正在处理的提示信息query:默认值'', 搜索查询的条件qtype:默认值'', 搜索查询的类别qop:默认值"Eq", 搜索的操作符nomsg:默认值'没有符合条件的记录存在', 无结果的提示信息minColToggle:默认值1, 最少保留的列数showToggleBtn:默认值true, 是否显示隐藏列按钮hideOnSubmit:默认值true, 提交时是否显示遮盖showTableToggleBtn:默认值false, 是否显示伸缩按钮autoload:默认值true, 是否自动加载blockOpacity:默认值0.5, 透明度设置onToggleCol:默认值false,隐藏列时触发的函数onChangeSort:默认值false, 当改变排序时触发的函数onSuccess:默认值false, 成功后执行的函数onSubmit:默认值false, 调用自定义的函数showcheckbox:默认值false, 是否显示第一列的checkbox（用于全选）rowhandler:默认值false,启用行的扩展事件功能,在生成行时绑定事件，如双击，右键等rowbinddata:默认值false,配合上一个操作，如在双击事件中获取该行的数据extParam:默认值{},添加extParam参数可将外部参数动态注册到grid，实现如查询等操作gridClass:默认值"bbit-grid",flexigrid的样式onrowchecked:默认值false,在每一行的的checkbox选中状态发生变化时触发某个事件2.FlexiGrid的方法：flexigrid(p):根据属性p创建flexigridflexReload(p)根据属性p重新加载flexigridflexResize(w,h)重新指定flexigrid宽度和高度ChangePage(type)改变当前页flexOptions(p)更新OptionGetOptions获取OptiongetCheckedRows获取选中的行flexToggleCol(cid, visible)重新加载flexigridflexAddData(data)为flexigrid增加数据noSelect(p)禁止选中。

前端 js 增删改查原理

前端 js 增删改查原理Javascript是网页前端开发所必需的一种语言，而在实际的网页开发中，增删改查操作也是非常常见的。

下面将围绕“前端 js 增删改查原理”进行阐述。

一、增加操作增加操作是指向网页中添加新的元素或节点，常见的方式有两种：innerHTML和document.createElement。

1. 使用innerHTMLinnerHTML是一种向网页中添加HTML代码的方式，可以轻松地添加新的HTML标签，例如div、p、ul、li等等。

以下是使用innerHTML 添加一个 div 元素的示例：var newDiv = document.createElement("div");newDiv.innerHTML = "这是新添加的一个div元素";document.body.appendChild(newDiv);2. 使用document.createElement使用document.createElement可以先创建一个新的元素，再将其添加到网页中。

以下是使用document.createElement添加一个 p 元素的示例：var newPara = document.createElement("p");var paraText = document.createTextNode("这是新添加的一个p元素");newPara.appendChild(paraText);document.body.appendChild(newPara);二、删除操作删除操作是指在网页中删除特定的元素或节点。

常见的方式有两种：innerHTML和removeChild。

1. 使用innerHTML内置的innerHTML可以轻松地清空一个元素中的所有内容。

以下是使用innerHTML清空一个 div 元素的示例：var myDiv = document.getElementById("myDiv");myDiv.innerHTML = "";2. 使用removeChild使用removeChild方法可以从文档中删除指定的子节点。

ant design react form 动态增减表单项-概述说明以及解释

ant design react form 动态增减表单项-概述说明以及解释1.引言1.1 概述在现代软件开发中，表单是不可或缺的一部分，它允许用户输入、编辑和提交数据。

然而，当我们遇到需要在表单中动态增加或减少表单项的需求时，传统的表单实现可能会变得复杂和繁琐。

Ant Design React Form 是一个基于React 的表单解决方案，它提供了一套强大且可定制的表单组件，为开发者提供了丰富的功能和良好的用户体验。

而动态增减表单项正是Ant Design React Form 中一个非常实用的功能。

动态增减表单项的需求在很多实际场景中都会遇到，比如订单中商品数量的调整、个人信息的动态添加等等。

这种需求的实现不仅能够提高用户的操作便利性，还可以减少开发者的工作量。

本文将以Ant Design React Form 动态增减表单项为研究对象，对其进行深入分析和探讨。

首先，我们将介绍Ant Design React Form 的基本概念和特点。

然后，我们将详细分析动态增减表单项的需求，并提出解决该需求的方法和实现方式。

最后，我们将讨论该功能的应用场景和优势，以期能够为开发者在实际项目中应对类似需求时提供一些有益的指导和思路。

随着软件开发的不断演进，Ant Design React Form 动态增减表单项的实现将成为越来越重要的一环。

因此，本文对于学习和理解该功能的实现原理和应用场景将具有一定的参考价值。

通过深入研究Ant Design React Form 动态增减表单项，我们将能够更好地应对复杂的表单需求，提高开发效率和用户体验。

1.2文章结构文章结构部分的内容可以这样写：1.2 文章结构本文主要围绕着Ant Design React Form动态增减表单项展开，为读者介绍该需求的背景和落地实现的方法。

主要分为以下几个部分：1. 引言：对整篇文章进行了简要的概述，介绍了Ant Design React Form的基本概念和动态增减表单项的需求。

vue sqlite3 增删改查写法

一、Vue框架介绍Vue.js是一款流行的前端JavaScript框架，它能够帮助开发者构建用户界面。

Vue提出了一种全新的前端开发理念，它采用了组件化的思想，使得前端开发更加模块化和灵活。

通过Vue，开发者可以轻松地管理页面状态、数据绑定、事件监听等功能。

在Vue的生态系统中，也有很多周边库和插件，用来扩展Vue的功能。

二、SQLite3数据库介绍SQLite3是一款轻量级的关系型数据库管理系统，它被广泛应用在移动设备、嵌入式设备以及小型全球信息站的开发中。

相比于传统的关系型数据库系统，SQLite3的特点在于无需配置、零配置、无服务器和无需安装。

它支持多种编程语言调用，包括但不限于C、C++、Java、Python等。

SQLite3的数据存储在一个单一的文件中，数据库操作简单、高效。

三、在Vue中使用SQLite3的方法在现代的Web应用程序中，也经常需要使用数据库来存储和管理数据。

在Vue中使用SQLite3可以借助一些第三方插件或者进行简单封装。

在Vue的生态系统中，有一些与SQLite3相关的插件可以简化与SQLite3的交互过程。

四、Vue中SQLite3的增删改查写法1. 增加数据在Vue中与SQLite3数据库进行数据插入的操作，可以通过以下步骤：（1）创建数据库连接：在Vue的methods中创建数据库连接，引入SQLite3的模块；（2）执行SQL语句：通过执行SQL语句来插入数据，首先编写插入数据的SQL语句，然后通过数据库连接执行该语句；（3）数据处理：根据执行SQL语句的返回结果进行数据处理，例如显示插入成功的提示信息或者刷新页面显示最新的数据。

2. 删除数据在Vue中与SQLite3数据库进行数据删除的操作，可以通过以下步骤：（1）创建数据库连接：同样在Vue的methods中创建数据库连接，并引入SQLite3的模块；（2）执行SQL语句：编写删除数据的SQL语句，通过数据库连接执行该语句；（3）数据处理：根据执行SQL语句的返回结果进行数据处理，例如显示删除成功的提示信息或者刷新页面显示最新的数据。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

这是关于客户表的增删改前台显示页面后台使用SSH框架即可此处暂不提供后台代码（可以试试自己编写，可提高自己的能力和对SSH框架的熟知度）<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="/jsp/jstl/core" prefix="c"%><%@ taglib uri="/struts-tags" prefix="s"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="/1999/xhtml"><HEAD><base href="<%=basePath%>"><TITLE>CRM——客户关系管理系统</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type> <script src="<%=basePath%>js/jquery/jquery-1.8.2.js"type="text/javascript"></script><link href="<%=basePath%>js/flexigrid/css/flexigrid.css"type="text/css" rel="stylesheet" /><script src="<%=basePath%>js/flexigrid/js/flexigrid.js"type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {var grid = $("#flexTable").flexigrid({width :'100%',height : 340,url :'system/customerAction_queryCustomer.do',dataType :'json',checkbox :true,colModel : [{display : '编号',name :'id',width : 100,sortable :true,align :'center',hide :false,toggle :false},{display : '客户名称',name :'customerName',width : 170,sortable :true,align :'center'},{display : '客户年龄',name :'customerAge',width : 170,sortable :true,align :'center'},{display : '客户性别',name :'customerSex',width : 170,sortable :true,align :'center'}],buttons : [{name :'add',displayname : '新增',bclass :'add',onpress :function(){window.location.href="<%=basePath%>/system/customerAction_gotoAddPag e.do";}},{separator :true},{name :'modify',displayname : '修改',bclass :'modify',onpress :function(){if($(".trSelected",grid).length==1){ var id=$('.trSelectedtd:nth-child(2)',grid).text();window.location.href="<%=basePath%>/system/customerAction_update.do? ids="+id;}else if($(".trSelected",grid).length>1){alert("请选择一个修改,不能同时修改多个记录!");}elseif($(".trSelected",grid).length==0){alert("请选择一个您要修改的记录!")}}}, {separator :true},{name :'delete',displayname : '删除',bclass :'delete',onpress :function(){if($('.trSelected', grid).length == 0) {alert("请选择要删除的数据!", "系统提示！");}else {var items = $('.trSelected',grid);var itemlist = [];for(i=0;i<items.length;i++){ itemlist.push(items[i].id);}$.ajax({type :"POST", url :"system/customerAction_delCustomer.do",data :"ids=" +itemlist.join(),dataType :"text",success :function(msg) {alert("删除成功！");//alert(msg);$("#flexTable").flexReload();},error :function(msg) {alert("系统异常！");}});}}}, {separator :true}],/**这是查询方法，因为后台没写，故注掉，可根据自己的需要编写searchitems : [{display : '编号',name : 'id',isdefault : true}, {display : '客户名称',name : 'customerName'}, {display : '客户年龄',name : 'customeAge'}, {display : '客户性别',name : 'customerSex'}],*/errormsg : '发生异常',//sortname : "id",// sortorder : "desc",usepager :true,title : '客户信息列表',pagestat : '显示{from}到{to}条记录，总数{total}条',useRp :true,rp : 5,rpOptions : [5,10, 15, 20, 30, 40, 100],nomsg : '没有符合条件的记录存在',novstripe : false, // true没有垂直线minColToggle : 1,showTableToggleBtn :true,autoload :true,resizable :false,procmsg : '加载中, 请稍等 ...',hideOnSubmit :true,blockOpacity : 0.5,showcheckbox :true,gridClass :"bbit-grid",rowhandler :false,rowbinddata :true});});</script></HEAD><BODY><div id="ptable" style="margin: 10px"><table id="flexTable" style="display: none"></table> </div></BODY></HTML>。