datagrid 表格数据填充方式

1、效果图

2、代码

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>datagrid 表格数据填充方式</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><!-- 引入easyui --><link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"><script src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script></head><body><h2>基本表格一：用HTML填充表格</h2><table class="easyui-datagrid" title="用户的基本信息" style="width:700px;height:250px"data-options='singleSelect:true,collapsible:true,data:[{"id":1,"name":"阿猫","sex":"男","sort":100},{"id":2,"name":"阿狗","sex":"女","sort":100},{"id":3,"name":"阿猪","sex":"保密","sort":105}]'> <!-- ,url:'datagrid_data1.json',method:'get' --><thead><tr><th data-options="field:'abc',width:80,hidden:true">编号</th> <!-- 设置该列隐藏 --><th data-options="field:'id',width:80">编号</th> <!-- 宽度80(px) --><th data-options="field:'name'">姓名</th> <!-- 不设置时宽度自适应 --> <th data-options="field:'sex',width:'120px',align:'left'">性别</th><!-- 宽度 120px ，左对齐 --><th data-options="field:'sort',width:'30%',sortable:true,align:'center'">排序</th> <!-- 宽度占总宽度的30%（自适应），排序，居中 --> </tr></thead></table><br/><h2>基本表格二：用JS填充表格</h2><div id="search_id"> <!-- 搜索框 DIV --><input class="easyui-textbox" name="s[name]" data-options="prompt:'请输入姓名'" style="width:120px">排序：<input class="easyui-numberspinner" type="text" name="s[m_s]" data-options="prompt:'大于等于',min:1,increment:1,precision:0,editable:true,width:'50px'"></input> <!-- min:最小值为1；increment:每次自增1；precision：保留n位小数；editable：是否能够编辑；width：输入框宽度 -->-<input class="easyui-numberspinner" type="text" name="s[m_e]" data-options="prompt:'小于等于',min:1,increment:1,precision:0,editable:true,width:'50px'"></input><select class="easyui-combobox" name="s[status]" data-options="editable: false,panelHeight:'auto'"><option value="all">请选择性别</option><option value="1">男</option><option value="2">女</option><option value="0">保密</option></select><br/>创建时间<input name="s[c_s]" class="easyui-datetimebox" data-options="showSeconds:false" style="width:130px">-<input name="s[c_e]" class="easyui-datetimebox" data-options="showSeconds:false" style="width:130px"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="setting_hosind_search();">查询</a></div><table id="js_set_easyuiTable" class="easyuiTable" toolbar="#search_id"></table> <!-- search_id：datagrid绑定的搜索框；js_set_easyuiTable：根据此ID用Jquery给该表格赋值 --></body>
</html><script>var tableData = [{"id":1,"name":"阿猫","sex":"1","sort":100},{"id":2,"name":"阿狗","sex":"2","sort":100},{"id":3,"name":"阿猪","sex":"0","sort":105}];//js填充表格数据$('#js_set_easyuiTable').datagrid({nowrap:false,//自动换行width:'700px',height:'auto',singleSelect:true,//fit:true,// 自适应父容器//animate:true,//定义当节点展开或折叠时是否显示动画效果pagination:'true',pageSize:10,pageList:[10,20,50],loadMsg:'请稍候,正在加载数据...',//url:'/setting/gift/index',    //url请求后台数据，我在这里为了演示暂时写死data:tableData,rownumbers: true,//显示行数columns:[[{field:'id',title:'',align:'center',hidden:true},{field:'name',title:'姓名',align:'left',width:200},{field:'sex',title:'性别',align:'center',width:'20%',sortable:true,formatter:function( val , rowData, rowIndex ){    //val:当前参数 sex的值；rowvar color = sexStr = '';if(val==0){    //等价于 rowData.sex==0color = 'green';sexStr = '保密';}else if(val==1){color = 'red';sexStr = '男';}else if(val==2){color = 'blue';sexStr = '女';}return '<span style="color:'+color+'">'+sexStr+'</span>';}},{field:'sort',title:'排序',align:'center',width:'125px',sortable:true},]],onLoadSuccess:function(data){  },});function setting_hosind_search(){var d = G('search_id');    //div的id是search$('#js_set_easyuiTable').datagrid('load',d); //post数据过去，重新加载这个表格}function G(id) {var data = {};var result = [];window.ddd = $('#' + id + ' input[name],#' + id + ' textarea[name]');$('#' + id + ' input[name],#' + id + ' textarea[name]').each(function(i, o) {var name = o.name;var val = o.value;if (o.type == 'checkbox') {if (!o.checked) return}if (name && name!='') {result[name] = val;data[o.name] = o.value}});$('#' + id + ' span[name]').each(function(i, o) {data[$(o).attr('name')] = $(o).attr('value');});return data}
</script>
<!-- PHP后台返回的数据格式 -->
<!--
$array = [['id' => 1, 'name' => '阿猫', 'sex' => '男', 'sort' => 100, ],['id' => 2, 'name' => '阿狗', 'sex' => '女', 'sort' => 100, ],['id' => 3, 'name' => '阿猪', 'sex' => '保密', 'sort' => 105,],
];
die(json_encode($array));
-->

datagrid 表格数据填充方式相关推荐

easyUI -datagrid表格数据不显示
出现easyUI -datagrid表格数据无法显示这种情况的可能原因有多方面的,可能是因情况而异吧,现在说一下日常做项目中我遇到过的这几个方面(原因二是我遇到过的,在网上看到也是常有的) 前提: 在 ...
R中6种读入表格数据的方式哪个最快？结果出人意料！
R怎么读入表格数据最快? R中有6个常用数据读取函数: utils::read.csv: 默认使用的读入方式 (read.table) readr::read_csv: readr包中的读入函数 (R ...
matlab表格数据输入方式,matlab输入excel表格数据-matlab怎么把数据写入excel
怎样将MATLAB中的数据输出到excel中第一:程序的方法 I=xlsread('文件名.xls');%注意文件要在matlab的读取路径中. 第二:快捷方法如何将excel表格中大量数据导入m ...
[java] easyexcel实现表格数据填充
Easy Excel生成excel 关于EseyExcel: 项目代码填充对象数据生成类主程序类演示打包运行测试遇到问题 EasyExcel官网为什么想写这个程序呢? 因为学校要求体温 ...
Java实现根据Word模板填充表格数据（poi方式），以及doc和docx转PDF，最全最详细版本，解决外部引用jar在linux上报ClassNotFound的问题。
Java实现根据Word模板填充表格数据(poi方式),以及doc和docx转PDF,最全最详细版本,解决外部引用jar在linux上报ClassNotFound的问题. 适用场景: 1.固定格式的W ...
easyUI之datagrid（数据表格）使用
一,点击人员信息回顾,右侧Tab页显示书籍相关信息 1.要有一个存放书籍信息的展示页面在WebContent目录下创建Folder文件夹jsp,在jsp目录下创建useManage.jsp界面 2. ...
vb用数组方式快速导出MSFlexGrid表格数据到Excel表格中
本来从MSFlexGrid或MSHFlexGrid导出数据到Excel中,是一个非常简单的问题,但论坛里还是经常有人问如何导出,有的虽然知道用单元格赋值方式循环导出,但速度太慢,因此写了一个通用的数据 ...
Easyui中DataGrid（数据表格）
Easyui中DataGrid(数据表格) 1.DataGrid简介 2.实现过程 2.1jsp页面的代码块(两种方式) 第一种第二种 3.DataGrid属性 4.实践操作 4.1界面创建 4.2 ...
layui根据条件显示列_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
ajax请求后台表格数据,商品后台表格数据的展现方式
表格数据的展现方式编辑页面--> CodeNamePrice 返回值类型的说明属性信息: total/rows/属性元素{ "total":2000, "row ...

datagrid 表格数据填充方式

datagrid 表格数据填充方式相关推荐

最新文章

热门文章