一.代码案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="css/flexigrid.css" type="text/css" rel="stylesheet" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/flexigrid.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var testData = { "page": 1, "total": 2, "rows": [ {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"} ] } var grid = $("#flexTable").flexigrid({ dataType: 'json', 760, height: 300, 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, page: 2, total: 2, 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 }); $("#flexTable").flexAddData(testData); 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(){ } $("#button1").on("click", function(){ console.log("1111"); grid.flexAddData({ page:1, total: 15, rows: [ {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}, {"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"} ] }); }); }); </script> </head> <body> <div id="ptable" style="margin: 10px"> <table id="flexTable" style="display: none"></table> </div> <button id="button1" type="button">111</button> </body> </html>
二.属性
height:默认值200, flexigrid的高度，单位为px
默认值'auto', flexigrid的宽度，auto表示根据每列的宽度自动计算
striped:默认值true, 是否显示斑纹效果，默认是奇偶交互的形式
novstripe:默认值false,是否显示垂直分隔条，默认显示
min默认值30, flexigrid列的最小宽度
minheight:默认值80, flexigrid列的最小高度
resizable:默认值false, 是否可调整大小
url:默认值false, ajax方式获取数据对应的url地址
method:默认值'POST', 数据发送方式
dataType:默认值'json', 数据加载的类型，xml,json
errormsg:默认值'发生错误', 错误提升信息
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选中状态发生变化时触发某个事件
三.方法
FlexiGrid的方法：
flexigrid(p)：根据属性p创建flexigrid
flexiReload(p)：根据属性p重新加载flexigrid
flexResize(w,h)：重新指定flexigrid的宽度和高度
ChangePage(type)：改变当前页
flexOptions(p)：更新Option
GetOptions：获取Option
getCheckdRows：获取选中的行
flexToggleCol(cid,visible)：重新加载flexigrid
flexAddData(data)：为flexigrid增加数据
noSelect(p)：禁止选中
四.两种数据格式
var testData = {
"page": 1,
"total": 2,
"rows": [
{"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"},
{"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"},
{"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"},
{"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"},
{"id": 1, "job_name": "name", "work_address": "1", "salary":"11", "date":"2021", "language":"ch"}
]
}
var testData = {
"page": 1,
"total": 2,
"rows":[
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]},
{"cell" : ["A", "a group", "0", "d", "1", "1"]}
]
}
https://blog.csdn.net/weixin_43842590/article/details/86543146
https://blog.csdn.net/shb_derek1/article/details/8133094?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-12.control&dist_request_id=1619706073520_32812&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-12.control
https://csfreebird.blog.csdn.net/article/details/9897489?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-9.control&dist_request_id=1619708157257_22425&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-9.control
https://bbs.csdn.net/topics/390682902?page=3