# datagrid **Repository Path**: funsent/datagrid ## Basic Information - **Project Name**: datagrid - **Description**: Javascript实现的数据表格插件 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-04-16 - **Last Updated**: 2023-04-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: JavaScript, datagrid, Web ## README # funsent-datagrid > javascript实现的数据表格插件 ## 说在前面 数据呈现一直是web端和各类应用系统必不可少的一环，几乎所有的软件都离不开数据呈现，哪怕开发的应用不是基于数据库。 普通的table数据呈现已经足够使用了，只是绝大部分情况下需要自行扩展额外的功能，比如查看行、新增行等功能。所以市面上出现了一大堆用于二维数据表格呈现的插件，比如jQuery的datatable，easyui的datagrid等等。 在基于实际项目和上述插件的使用过程中，一直想独立开发一款原生javascript实现的数据表格插件，主要原因有以下几点： 1. 纯javascript实现，不依赖于任何第三方框架，灵活可控。 2. 框架在不断地推陈出新。从prototype的没落，到jQuery的下滑，再到现在广为流行的Vue，以后也一样是淘汰的命运，但是只要web在，javascript原生依然在。 3. javascript已成为现代乃至未来不可或缺的技术，熟练掌握原生写法就特别重要了，比如现在众多开发者只会Vue不会原生，职业发展将非常不利。 4. 每一个开发者都应该有自己的一套组件系统，哪怕是使用第三方的，还是自己开发的。当然本人推荐有能力的开发者都自行开发，有时候重复造轮子是对技术熟练掌握的必经之路。 5. 还有其他很多原因。 ## 插件介绍 该插件命名为datagrid，是一款类似于easyui的web数据表格插件，但是该插件不依赖于其他库和框架。 该插件主要用于web端的数据表格呈现，通过设置url参数，将服务器返回的数据自动渲染到页面上。插件实现了标题栏、工具栏、搜索栏、数据列表和分页条集成，您只要配置相关参数，该插件可以帮你自动在页面指定的元素上创建，无需在额外手工规划布局。 该插件支持众多的参数配置，比如是否开启分页、是否显示行号、行号是否连续、单选多选全选、是否设置工具操作和搜索条等。插件内置了查看、新增、编辑、删除和搜索等5种通用操作，您可以通过回调方法实现额外需求。同时插件还预留了methods参数用于扩展额外的操作方法。 该插件由一个js和一个css文件组成，css样式文件在实际项目中可用于调整为自己的样式。 ## 插件演示 ![datagrid实例演示图](./tests/demo.png) ## 演示地址 [funsent datagrid](http://www.9k4k.com/datagrid/tests/demo.html) ## 插件特点 - 标题自定义 - 支持配置请求url、请求方法和默认请求参数 - 支持主键字段配置，通过该字段唯一标记一行，对应数据库的主键字段 - 支持列字段自定义配置 - 支持单选多选全选，及关联选择行功能 - 支持分页，需本人另一个插件：pagination，需传入当前页码page和每页显示记录数pagesize等2个参数 - 支持自动行号，以及行号是否连续 - 支持自定义工具按钮和操作，内置了查看、新增、编辑、删除等4个通用操作 - 支持隔行显示背景色 - 支持双击查看行功能 - 支持自定义搜索，表单类型支持：text（普通文本框）、select（下拉选择框）和button（搜索按钮） - 支持自定义方法扩展注入，通过methods参数 - 独立的css样式文件可以自行调整显示样式 ## 插件使用 1. 下载插件 ```shell # git clone https://gitee.com/funsent/datagrid.git ``` 2. 创建页面，同时引入插件及相关文件，参数配置和初始化 ```html
``` ## 注意事项 1. 目前还未彻底移除jQuery和layer，主要使用了jQuery的ajax相关方法和弹出层，未来将自行开发ajax和弹出层，并将移除对jQuery和layer的依赖 2. 插件文档待更新 ## 意见建议 联系方式 QQ: 2018708，微信：younggf > 加好友时请备注：datagrid插件