前端开发过程中，免不了使用各总各样的插件，这里介绍一下前段插件jQuery easyui中的表格工具——datagrid，当然，这里仅仅只是说明如何获取列宽度的问题。
工具/原料
1
windows系统 + eclipse开发工具
2
Java web框架
3
浏览器
方法/步骤
1
首先，需要在已经调试好的Java web框架的前端文件中引入jQuery easyUI的插件（包括css与js等静态资源）
2
其次，使用datagrid创建一个表格示例，通过查看插件的Api，我们可以看到大概有三种方式，如下图：
3
这里采用第三种方式，使用的json数据是从官网下载demo中拷出来的，这样就不必担心json数据格式无法识别的问题，示例代码书写和页面展现如下图：
4
可以看到，在datagrid初始化时，其属性columns（表头数据以及属性，表头属性的确定也就意味着每一列属性的确定了）中包括一个width属性，这个既是每列的列宽，可以设置数值，也可以不设置。然后，接着看官网的API，想要获取datagrid的列宽，我们需要从datagrid的方法入手，也就是官网中的Methods。通过查看datagrid的Methods,可以想到两个可能获取列宽度的方式，一种是通过表格的所有属性获取，另一种是通过列的属性获取
5
经过上边的猜测，需要使用js代码进行验证，也就需要采用浏览器的前段调试方式，因为个人习惯使用谷歌浏览器，所以将使用console.log()函数将变量在浏览器端进行输出（在浏览器中使用f12快捷键可以打开开发调试界面）
6
根据上边调试情况，在js中书写获取列宽度的代码，这样就可以获取到datagrid的列宽度了
7
所以，在本例中可以使用：$('#dg').datagrid('options').columns[0][0].width或者$('#dg').datagrid('getColumnOption','productid').width的方式获取列宽度
下一篇：皮肤暗哑怎么画出水光肌？