jquery easyui datagrid 加载保存好的自定义设置的列属性
直接附上源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Format DataGrid Columns - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="css/material/easyui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> </head>
<body>
<h2>Transform DataGrid from Table</h2>
<p>Transform DataGrid from an existing, unformatted html table.</p>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid()">Transform</a> <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid('reload')">reload</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:saveconfig()">save config</a>
</div>
<table id="dg" style="width:700px;height:auto;border:1px solid #ccc;">
<thead>
<tr>
<th data-options="field:'itemid'">Item ID</th>
<th data-options="field:'productid'">Product</th>
<th data-options="field:'listprice',align:'right'">List Price</th>
<th data-options="field:'attr1',hidden:true">Attribute</th>
</tr>
</thead>
<tbody>
<tr>
<td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
<td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
<td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
<td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
<td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>
</tbody>
</table> <div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
<div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
<div class="menu-sep"></div>
<div onclick="expand()">Expand</div>
<div onclick="collapse()">Collapse</div>
</div>
<script>
function reloadcols(){
$('#dg').datagrid({
columns:JSON.parse(localStorage.getItem('#dgcolumens'))
});
}
function saveconfig(){
const opts=$('#dg').datagrid('options');
console.log(opts.columns);
localStorage.setItem('#dgcolumens', JSON.stringify(opts.columns));
}
(function($){
function buildMenu(target){
var state = $(target).data('datagrid');
if (!state.columnMenu){
state.columnMenu = $('<div></div>').appendTo('body');
state.columnMenu.menu({
onClick: function(item){
if (item.iconCls == 'tree-checkbox1'){
$(target).datagrid('hideColumn', item.name);
$(this).menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox0'
});
} else if (item.iconCls == 'tree-checkbox0') {
$(target).datagrid('showColumn', item.name);
$(this).menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox1'
});
}else{ }
const opts=$(target).datagrid('options');
localStorage.setItem(opts.id, JSON.stringify(opts.columns));
}
})
state.columnMenu.menu('appendItem', {
text: '保存配置',
name: 'saveconfigitem',
iconCls: 'icon-save'
});
var fields = $(target).datagrid('getColumnFields',true).concat($(target).datagrid('getColumnFields',false));
for(var i=0; i<fields.length; i++){
var field = fields[i];
var col = $(target).datagrid('getColumnOption', field);
state.columnMenu.menu('appendItem', {
text: col.title,
name: field,
iconCls: !col.hidden?'tree-checkbox1':'tree-checkbox0'
});
} }
return state.columnMenu;
}
$.extend($.fn.datagrid.methods, {
columnMenu: function(jq){
return buildMenu(jq[0]);
}
});
})(jQuery);
$(()=>{ $('#dg').datagrid({
onHeaderContextMenu: function(e, field){
e.preventDefault();
$(this).datagrid('columnMenu').menu('show', {
left:e.pageX,
top:e.pageY
});
},
onLoadSuccess:function(data){
console.log(data); },
onBeforeLoad:function(p){
console.log(p);
} }); $('#dg').datagrid({
columns:JSON.parse(localStorage.getItem('dg'))
});
})
</script>
</body>
</html>
jquery easyui datagrid 加载保存好的自定义设置的列属性的更多相关文章
- jquery easyui datagrid 加每页合计和总合计
jquery easyui datagrid 加每页合计和总合计 一:效果图 二:代码实现 这个只有从后台来处理 后台根据rows 和page两个参数返回的datatable 命名为dt 然后根据dt ...
- JQuery EasyUI 引用加载分析
easyui是什么,就不介绍了,接触到前端的就算没用过,肯定也应该听说过.其次,本文不是介绍它提供如calendar.tree等这些功能如何使用的,这些官网上介绍都很详细,中文的网上也不少.本文是从e ...
- Easyui datagrid加载数据时默认全选的问题
问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...
- jquery easyui tab加载内容的几种方法
转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
背景: 昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...
- easyui datagrid 加载静态文件中的json数据
本文主要介绍easyui datagrid 怎么加载静态文件里的json数据,开发环境vs2012, 一.json文件所处的位置 二.json文件内容 {"total":28,&q ...
- easyui datagrid 加载两次请求,触发两次ajax 请求 问题
datagrid初始化的时候请求两次URL 两种情况 1. <table id="gridview" class="easyui-datagrid"> ...
- easyui datagrid加载数据的三种方式
1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...
- easyui datagrid加载数据和分页
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding=& ...
随机推荐
- 嵌入式Linux+NetCore 笔记一
记录嵌入式Linux+NetCore培训中遇到的一些问题以及解决方法 十一放假期间发现园里大神大石头(NewLife团队)开了一个嵌入式Linux+NetCore培训,就报名参加了.更幸运的是,我刚好 ...
- IIS创建文件服务器(WebDAV)
1.安装IIS,选择安装WEBDAV组件.然后新建站点,站点目录不需要额外设置任何权限 安装完成后组件: 2.配置WebDAV: 添加创作规则:允许某用户写入,其他所有用户读取.(写入规则必须要放在第 ...
- python 字符前缀,运算符、换行符、数据类型和变量
补充 *)/ 表示的除法即使是整数,结果也是浮点数 *)python表示的整数是没有大小限制的.而某些语言根据其储存长度是有大小限制的.例如Java对32位整数的范围限制在-2147483648-21 ...
- ubuntu玩坏之后
昨天,安装openssh-server的时候,与openssh-client冲突,故卸载openssh-client然后重装openssh-server解决问题. 今天,想装emacs,发现跟perl ...
- vuePress自动部署到Github Page脚本踩坑
背景 照着官网的教程来就行了,踩了个小坑,记录一下,希望对你有帮助 这是部署后的效果 小坑1 如图所示,官网推荐部署命令 然而windows 没有bash 指令, 直接运行报错 两个解决方法: 项目根 ...
- influxdb-1.7.8(centos 7) 部署
1.官方下载: https://dl.influxdata.com/influxdb/releases/influxdb-1.7.8.x86_64.rpm 2.安装软件 sudo yum locali ...
- 深度学习中目标检测Object Detection的基础概念及常用方法
目录 关键术语 方法 two stage one stage 共同存在问题 多尺度 平移不变性 样本不均衡 各个步骤可能出现的问题 输入: 网络: 输出: 参考资料 What is detection ...
- 201871010112-梁丽珍《面向对象程序设计(java)》第七周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- shell的使用技巧
推荐使用的远程连接软件以及vi编辑器的基本使用 简介:远程连接软件 与 vi命令的基本使用 (1)软件: CRT 已经下载好的压缩包 直接双击 点击新建会话 点击下一步 输入主机名 下一步 ...
- JDOJ 1775: 求N!中0的个数
JDOJ 1775: 求N!中0的个数 JDOJ传送门 Description 求N!结果中末尾0的个数 N! = 1 * 2 * 3 ....... N Input 输入一行,N(0 < N ...