{"id":13536724,"url":"https://github.com/baukh789/GridManager","last_synced_at":"2025-04-02T03:30:59.244Z","repository":{"id":32481817,"uuid":"36062092","full_name":"baukh789/GridManager","owner":"baukh789","description":"🌐 快速、灵活的对Table标签进行实例化，让Table标签充满活力。","archived":false,"fork":false,"pushed_at":"2023-08-26T08:37:47.000Z","size":9842,"stargazers_count":818,"open_issues_count":28,"forks_count":140,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-04-29T20:51:53.748Z","etag":null,"topics":["angular-grid","angular-table","grid","gridmanager","jqgrid","jquery-grid","jquery-table","react-grid","table","vue-gridview","vue-table"],"latest_commit_sha":null,"homepage":"https://gridmanager.lovejavascript.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baukh789.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-05-22T08:49:44.000Z","updated_at":"2024-06-18T15:26:48.232Z","dependencies_parsed_at":"2024-06-18T15:26:37.393Z","dependency_job_id":"7112821f-3f22-4375-a53a-0c36ce518a6c","html_url":"https://github.com/baukh789/GridManager","commit_stats":null,"previous_names":[],"tags_count":106,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baukh789%2FGridManager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baukh789%2FGridManager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baukh789%2FGridManager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baukh789%2FGridManager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baukh789","download_url":"https://codeload.github.com/baukh789/GridManager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246750975,"owners_count":20827811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-grid","angular-table","grid","gridmanager","jqgrid","jquery-grid","jquery-table","react-grid","table","vue-gridview","vue-table"],"created_at":"2024-08-01T09:00:48.001Z","updated_at":"2025-04-02T03:30:58.449Z","avatar_url":"https://github.com/baukh789.png","language":"JavaScript","readme":"# GridManager [一套代码多框架运行]\n\u003e 快速、灵活的对Table标签进行实例化，让Table标签充满活力。\n\n![image](https://s2.ax1x.com/2019/04/16/AxA4xK.png)\n[![Build Status](https://travis-ci.org/baukh789/GridManager.svg?branch=master\u0026style=flat-square)](https://travis-ci.org/baukh789/GridManager)\n[![npm version](https://img.shields.io/npm/v/gridmanager.svg?style=flat-square)](https://www.npmjs.com/package/gridmanager)\n[![npm downloads](https://img.shields.io/npm/dt/gridmanager.svg?style=flat-square)](https://www.npmjs.com/package/gridmanager)\n[![coverage](https://img.shields.io/codecov/c/github/baukh789/GridManager.svg?style=flat-square)](https://codecov.io/gh/baukh789/GridManager)\n\n## 优势\n在支持常见功能的前提下，提供了如: 导出、打印、列配置、右键菜单、行列移动、用户偏好记忆等提升用户体验的功能。\n\n内置基础类库jTool, 对原生DOM提供了缓存机制。\n\n支持在原生JS、jQuery、Angular 1.x、Vue、React环境下使用，一套代码多框架运行。\n\n在框架满天飞的时代，助力前端开发人员用更少的API做更多的事情。\n\n## 实现功能\n| 功能 | 描述 |\n| -: | :- |\n| 宽度调整 | 表格的列宽度可进行拖拽式调整 |\n| 位置更换 | 表格的列位置进行拖拽式调整 |\n| 配置列 | 可通过配置对列进行显示隐藏转换 |\n| 表头吸顶 | 在表存在可视区域的情况下,表头将一直存在于顶部 |\n| 列固定 | 指定某列固定在左侧或右侧 |\n| 排序 | 表格单项排序或组合排序 |\n| 分页 | 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能 |\n| 用户偏好记忆 | 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数 |\n| 序号 | 自动生成序号列 |\n| 全选 | 自动生成全选列 |\n| 导出 | 静态数据导出、动态数据导出、已选数据导出 |\n| 打印 | 当前页打印 |\n| 右键菜单 | 常用功能在菜单中可进行快捷操作 |\n| 过滤 | 通过对列进行过滤达到快速搜索效果 |\n| 合并 | 同一列下相同值的单元格可自动合并 |\n| 树表格 | 可通过配置快速实现树型表格结构 |\n| 行移动 | 可通过配置快速实现行位置移动 |\n| 嵌套表头 | 无层级限制配置复杂的表格实例 |\n\n## 安装\n```\nnpm install gridmanager --save\n```\n\n### 安装文件目录及说明\n- index.css `样式文件，原生及框架使用同一份样式文件`\n- index.js `原生使用的js文件`\n- vue2 `vue2框架使用的js文件`\n- react `react框架使用的js文件`\n- angular-1.x.js `angular1.x使用的js文件`\n\n## 引用\n### ES6+\n```\nimport 'gridmanager/index.css'; // 各框架通过样式文件\nimport GridManager from 'gridmanager'; // 原生js引用方式\nimport GridManager from 'gridmanager/vue2'; // vu2引用方式\nimport GridManager from 'gridmanager/react'; // react引用方式\nimport GridManager from 'gridmanager/angular-1.x'; // angular-1.x引用方式\n```\n\n### ES5\n```\n\u003clink rel=\"stylesheet\" href=\"gridmanager/index.css\"\u003e\n\u003cscript src=\"gridmanager/index.js\"\u003e\u003c/script\u003e\n```\n\n## API\n- [API](https://gridmanager.lovejavascript.com/api/index.html)\n\n## Demo\n- [简单的示例](https://gridmanager.lovejavascript.com/demo/index.html)\n- [复杂的示例](https://develop.lovejavascript.com/)\n\n## 框架版本介绍\n- [GridManager by Angular 1.x](https://github.com/baukh789/GridManager/tree/master/src/framework/angular-1.x/README.md)\n- [GridManager by Vue](https://github.com/baukh789/GridManager/tree/master/src/framework/vue/README.md)\n- [GridManager by React](https://github.com/baukh789/GridManager/tree/master/src/framework/react/README.md)\n\n## 示例\n### 使用默认配置\n```html\n\u003ctable\u003e\u003c/table\u003e\n```\n```javascript\ndocument.querySelector('table').GM({\n    gridManagerName: 'demo-baseCode',\n    ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',\n    ajaxType: 'POST',\n    query: {pluginId: 1},\n    columnData: [\n        {\n            key: 'name',\n            text: '名称'\n        },{\n            key: 'info',\n            text: '使用说明'\n        },{\n            key: 'url',\n            text: 'url'\n        }\n    ]\n});\n```\n\n### 使用分页\n```html\n\u003ctable\u003e\u003c/table\u003e\n```\n```javascript\ndocument.querySelector('table').GM({\n\tgridManagerName: 'demo-ajaxPageCode',\n    ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',\n    ajaxType: 'POST',\n    query: {pluginId: 1},\n    supportAjaxPage: true,\n    columnData: [\n        {\n            key: 'name',\n            text: 'name'\n        },{\n            key: 'info',\n            text: 'info'\n        },{\n            key: 'url',\n            text: 'url'\n        }\n    ]\n});\n```\n\n### 调用公开方法\n```javascript\n// 刷新\nGM.refreshGrid('demo-ajaxPageCode');\n\n// 更新查询条件\nGM.setQuery('demo-ajaxPageCode', {name: 'baukh'});\n```\n\n其它更多请直接访问[API](https://gridmanager.lovejavascript.com/api/index.html)\n\n## 数据格式\n\u003e 这是标准格式, 如果返回格式不同。可以通过参数或responseHandler进行修改。 具体请参考[API](https://gridmanager.lovejavascript.com/api/index.html#responseHandler)\n\n```\n{\n    \"data\": [\n        {\n            \"name\": \"baukh\",\n            \"age\": \"28\",\n            \"createDate\": \"2015-03-12\",\n            \"info\": \"野生前端程序\",\n            \"operation\": \"修改\"\n        },\n        {\n            \"name\": \"baukh\",\n            \"age\": \"28\",\n            \"createDate\": \"2015-03-12\",\n            \"info\": \"野生前端程序\",\n            \"operation\": \"修改\"\n        },\n        {\n            \"name\": \"baukh\",\n            \"age\": \"28\",\n            \"createDate\": \"2015-03-12\",\n            \"info\": \"野生前端程序\",\n            \"operation\": \"修改\"\n        }\n    ],\n   totals: 1682\n}\n```\n\n## 皮肤\n\u003e 以下皮肤为第三方提供，如果你也有过好的实现，请提交至 [issues](https://github.com/baukh789/GridManager/issues)\n\n- [element-ui](https://github.com/xtfan21/GridManager-element-skin)\n- [ant-design](https://github.com/BoWang816/GridManager-antDesign-skin)\n- [skin tool](http://skin.degapp.com/)\n\n## 贡献者\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/BoWang816\"\u003e\n            \u003cimg alt=\"\" width=\"100\" height=\"100\" class=\"avatar width-full rounded-2\" src=\"https://avatars2.githubusercontent.com/u/26587649?s=460\u0026v=4\"\u003e\n            \u003cdiv style=\"text-align:center\"\u003eBoWang816\u003c/div\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/luchyrabbit\"\u003e\n            \u003cimg alt=\"\" width=\"100\" height=\"100\" class=\"avatar width-full rounded-2\" src=\"https://avatars0.githubusercontent.com/u/21122430?s=460\u0026v=4\"\u003e\n            \u003cdiv style=\"text-align:center\"\u003eluchyrabbit\u003c/div\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/xtfan21\"\u003e\n            \u003cimg alt=\"\" width=\"100\" height=\"100\" class=\"avatar width-full rounded-2\" src=\"https://avatars2.githubusercontent.com/u/23092282?s=460\u0026v=4\"\u003e\n            \u003cdiv style=\"text-align:center\"\u003extfan21\u003c/div\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/gaochaodd\"\u003e\n            \u003cimg alt=\"\" width=\"100\" height=\"100\" class=\"avatar width-full rounded-2\" src=\"https://avatars3.githubusercontent.com/u/19342927?s=460\u0026v=4\"\u003e\n            \u003cdiv style=\"text-align:center\"\u003egaochaodd\u003c/div\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/silence717\"\u003e\n            \u003cimg alt=\"\" width=\"100\" height=\"100\" class=\"avatar width-full rounded-2\" src=\"https://avatars2.githubusercontent.com/u/8267830?s=460\u0026amp;v=4\"\u003e\n            \u003cdiv style=\"text-align:center\"\u003esilence717\u003c/div\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/heriky\"\u003e\n            \u003cimg alt=\"\" width=\"100\" height=\"100\" class=\"avatar width-full rounded-2\" src=\"https://avatars1.githubusercontent.com/u/12195736?s=460\u0026v=4\"\u003e\n            \u003cdiv style=\"text-align:center\"\u003eheriky\u003c/div\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## License\n- [License](/LICENSE)\n\n## 浏览器兼容\n- Firefox \u003e= 59, Chrome \u003e= 56，Edge \u003e= 16, Safari \u003e= 13\n\n## 微信讨论群\n\u003e 使用问题可扫码加群讨论，BUG类问题请通过issues提交。\n\u003cimg alt=\"\" width=\"200\" height=\"200\" class=\"avatar width-full rounded-2\" src=\"https://gridmanager.lovejavascript.com/wx-code.jpg\"\u003e\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaukh789%2FGridManager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaukh789%2FGridManager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaukh789%2FGridManager/lists"}