easyUI表格的分页及动态绑定数据

gesp c++ 五级知识点 阅读详情
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>考试系统后台</title>
		<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
  	 	 <link rel="stylesheet" type="text/css" href="css/themes/icon.css">
   		 <link rel="stylesheet" type="text/css" href="css/demo.css">
   		 <script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			$("#d" ).css("display", "none");
    		});
    		function call(data){
    			
    		}
    		function show(){
    			$("#d" ).css("display", "block");
    			
    			$('#tt').datagrid({    
				    url:'http://localhost:8080/getAllQuestions',    
				    columns:[[    
				        {field:'id',title:'编号',width:100,align:'center'},    
				        {field:'title',title:'内容',width:100,align:'center'},  
				        {field:'state',title:'类型',width:100,align:'center'},
				        {field:'level',title:'难度',width:100,align:'center'},
				        {field:'score',title:'分值',width:100,align:'center'},
				        {field:'a',title:'A选项',width:100,align:'center'},
				        {field:'b',title:'B选项',width:100,align:'center'},
				        {field:'c',title:'C选项',width:100,align:'center'},
				        {field:'d',title:'D选项',width:100,align:'center'},
				        {field:'answer',title:'正确选项',width:100,align:'center'},
				    ]],
					toolbar : [ {
						text : '添加',
						iconCls : 'icon-add',
						//为按钮绑定单击事件
						handler : function() {
							alert('add...');
							
							
						}
					}, {
						text : '删除',
						iconCls : 'icon-remove',
						handler : function() {
							var row = $('#tt').datagrid('getSelected');
							alert("是否删除编号是["+row.id+"]的这条数据?");
							$.ajax({
								url:"http://localhost:8080/deleteQuestions?id="+row.id,
								type:"get",
								async:true,
								dataType:"json",
								jsonpCallback:"call",
								success:function(data){
									
									
									
								}
							});
							
						}
					}, {
						text : '修改',
						iconCls : 'icon-edit',
						handler : function() {
							var row = $('#tt').datagrid('getSelected');
							alert("是否修改编号是["+row.id+"]的这条数据?");
							$.ajax({
								url:"",
								type:"get",
								async:true,
								dataType:"json",
								jsonpCallback:"call",
								success:function(data){
									
									
									
								}
							});
							
						}
					}, {
						text : '查询',
						iconCls : 'icon-search'
					} ],
				  	fit:true,
					fitColumns:true,
					striped:true,
					rownumbers:true,
					border:false,
					pagination:true,
					pageList:[10,12,14,16],
					pageNumber:1,
					sortName:'data',
					sortOrder:'desc',
					loadFilter: pagerFilter,
				}); 
    		}
    		
    		
    		function pagerFilter(data) {  
			    if (typeof data.length == 'number' && typeof data.splice == 'function') {  
			    	//typeof判断变量类型的,12是数字,所以输出的结果是number
			        data = {  
			            total: data.length,  
			            rows: data  
			        }  
			    }  
			    var dg = $(this);  
			    var opts = dg.datagrid('options');  //返回参数对象
			    var pager = dg.datagrid('getPager');  
			    pager.pagination({  
			        onSelectPage: function (pageNum, pageSize) {  
			            opts.pageNumber = pageNum;  
			            opts.pageSize = pageSize;  
			            pager.pagination('refresh', {  
			                pageNumber: pageNum,  
			                pageSize: pageSize  
			            });  
			            dg.datagrid('loadData', data);  
			        }  
			    });  
			    if (!data.originalRows) {  
			        if(data.rows)  
			            data.originalRows = (data.rows);  
			        else if(data.data && data.data.rows)  
			            data.originalRows = (data.data.rows);  
			        else  
			            data.originalRows = [];  
			    }  
			    var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);  
			    var end = start + parseInt(opts.pageSize);  
			    data.rows = (data.originalRows.slice(start, end));  
			    return data;  
			}    
    	</script>
	</head>
	<body>
			
	    <div class="easyui-layout" style="width:1400px;height:700px;margin: 0 auto;">
	        <div data-options="region:'north'" style="height:55px">
	        	<div  style="text-align: center;margin-top: 10px;"><h2>考试管理系统后台</h2></div>
	        </div>
	        <div data-options="region:'west',split:true" title="操作列表" style="width:200px;">
	        	<div  style="text-align: center;margin-top: 20px;">
	        		<a href="#" class="easyui-linkbutton c5" style="width:120px" onclick="show()">试题管理</a>
	        	</div>
	        </div>
	        <div data-options="region:'center',title:'主界面',iconCls:'icon-ok'" id="d">
			    <table id="tt" >
			    </table>
	        </div>
	        
	    </div>
		
	</body>
</html>

在mdk文件移植太多_XCubeClassB代码 的移植 前言ST在www.st.com官网上提供了针对IEC60730/IEC60335 ClassB认证的软件包。软件包分为三个,分别适用STM8,STM32(基于标准外设库)和STM32(基于HAL库):STM8-SafeCLASSB,STM32-CLASSB-SPL,X-CUBE-CLASSB。本文以X-CUBE-CLASSB为例介绍如何做代码的移植以及经常遇到的问题的解决办法。X-CUB... 阅读详情

相关推荐

Java utgard连接OPC问题记录

怎么开启是个问题, 是在引入openscada的jar包里的Sever类中修改,这就犯难了, 其实没必要, 只要在自己项目下创建与openscada中Server类相同的路径,并复制Server过去改就行了, 项目会优先使用本地类,像下面这样。奇迹发生了,0x00000005解决. 注: 我的安全补丁编码跟网上查到的并不一样, 所以最初没有删,后来全都删了就好了,这个编码规则咱也不知道.安全日志中记录用户登录行为, OPC通信需要使用Windows系统用户进行登录, 如果用户名密码错误这里会有相关记录.

wangxin1949的博客 2840

jQuery EasyUI DataGrid 数据表格

数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值。. 数据表格显示的数据以表格的形式,并提供了丰富的选择,排序,分组和编辑数据的支持。这个数据表格被设计以缩短开发时间,并要求开发商没有具体的知识。它是轻量级的,功能丰富的。单元格合并,多列标题,冻结列和页脚是其功能只是一小部分。 依赖组件(Dep

挨踢界小人物 1390

2022北京高考数学压轴题21题:Python暴力枚举验证k≥7的5种反例

本文探讨了2022北京高考数学压轴题21题的编程解法,通过Python暴力枚举验证k≥7的5种反例。文章详细介绍了m-连续可表数列的定义、问题转化与约束条件,并提供了暴力枚举算法设计和优化技巧,帮助读者理解如何用编程思维解决数学问题。

weixin_33552698的博客 233

easyui表格属性以及分页实现例子

一、表格常用配置如下:以OPC项目中的分页为例$('#dg').datagrid({ //title:'菜单列表', //标题 method : 'post', iconCls : 'icon-edit', //图标 singleSelect : false, //多选 width : 'auto', ...

wh_xmy的博客 1405

三相电机控制入门:端电压、相电压、线电压到底怎么测?(附实测波形对比)

本文为三相电机控制初学者提供了端电压、相电压和线电压的完整测量指南。通过厘清三者的物理定义与测量方法,详细讲解了如何搭建虚拟星形点电路,并对比分析了方波、SPWM和SVPWM三种主流控制模式下关键电压波形的核心特征与差异,帮助工程师掌握正确的示波器测量与波形解读技巧。

oauth7security的博客 650

[STM32H750]HAL库下FMC驱动正点原子MCU屏的移植与优化

本文详细介绍了在STM32H750平台上使用HAL库移植与优化正点原子MCU屏幕驱动的完整过程。重点解析了FMC硬件配置、Cache一致性处理、精确延时实现等关键技术难点,提供了实用的移植方案和性能优化技巧,帮助开发者高效解决屏幕显示问题。

rock5的博客 286

EasyUI -简单实现(交互,分页,列表)

为什么80%的码农都做不了架构师?>>> ...

weixin_34014277的博客 211

硬件电路(22)-TTL和232切换电路

工作中会遇到TTL和232电平的通信的状态,为了实现一种便捷的切换方式,参考了一些文章,提供一种电路方便大家使用。

剑藏锋的博客 1862

EasyUI框架Datagrid(数据表格)的实现,以及Datagrid的分页显示(详解)

        在前端页面中使用EasyUI框架时,通常会使用EasyUI自带的datagrid(数据表格)样式,下面我们对datagrid样式进行简单的介绍,并且会对datagrid的分页显示进行详细的介绍。         EasyUI的数据表格的实现有多种方式,下面我们介绍一下常用的几种。 1. 将静态HTML渲染为datagrid样式 &lt;!DOCTYPE html PUBLI...

听得到微笑的博客 1万+

PreScan快速入门到精通第三十九讲基于车道线识别传感器的车道保持辅助算法Demo讲解

车道保持辅助系统使用一个前置的摄像头,一般安装在车内后视镜附近,用来检测车辆前方的车道线,并监测车辆在其车道上的位置。在有电动助力转向EPS的车辆中,它轻轻地,但明显地反转向,以保持车辆在车道上。在简单车辆动力学的Simulink模型中,一个25%的油门开度常数被设定为输入,作为车辆行驶的纵向动力。首先是近似的角度α,它是传感器航向(=车辆航向)与右侧车道车道线的切线的近似角。一个配备了车道线传感器和简单动力学模型的车辆(MAZDA),将在没有任何规定轨迹的情况下跟随道路车道线行驶。3D浏览器中的多视图。

小明师兄的博客 1842

红火蚁巢穴AI智能识别,提供方案与思路!

🏆本文收录于 《全栈 Bug 调优(实战版)》 专栏。专栏聚焦真实项目中的各类疑难 Bug,从成因剖析 → 排查路径 → 解决方案 → 预防优化全链路拆解,形成一套可复用、可沉淀的实战知识体系。无论你是初入职场的开发者,还是负责复杂项目的资深工程师,都可以在这里构建一套属于自己的「问题诊断与性能调优」方法论,助你稳步进阶、放大技术价值 。

**My Coding Family** 1041

jquery easyUI ajax加载数据分页功能

今天自己搞框架,分享一些封装ajax请求数据,封装分页代码的一些代码心得。 页面先引入easyUI的基础样式和js文件 路径自己修改 然后定义自己的table singleSelect:true, autoRowHeight:true, pagination:true, pageSize:10,fit:false">

帅蒲 9752

Doris实战——结合Flink构建极速易用的实时数仓

Doris实战——结合Flink构建极速易用的实时数仓

爱吃辣条的博客 8229

扩展jquery easyui datagrid 之动态绑定列和数据

easyui datagrid 不支持动态加载列,上次使用的方法是自己用$.post()请求,在回调函数中提取出columns配置,添加到原options中去,然后调用$("#datagrid").datagrid(options)来重新生成表格,然后使用$("#datagrid").datagrid("loaddata",data)来载入返回的json格式数据。 但是这样做一来麻烦,二来有问题

~~~~ 2万+

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

easyui5

今天我们的主要任务是完成分页功能;导入数据表 t_book,数据文件在课件;介绍拼音字段,拼音工具类,拼音jar包;模糊查询还要实现拼音模糊查询,如:百度输入拼音也可以进行搜索;创建 Book实体类,注意,拼音属性赋值的时候是在书本名的 set方法里面进行转换赋值。如:mysql里面的分页语法:;的后面不能跟运算符,只能是常量,所以这里先算出来,再赋值。

2301_76964036的博客 909

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

easyui datagrid动态绑定列名和数据

公司有这么一个需求,根据不同的权限显示一张表不同的字段。这个要命的需求给UI层带来不少麻烦,首先,我们采用easyUI的datagrid显示表格数据,而表格的列是静态写死的,如果要根据不同权限显示不同的字段导致必须通过结果集来show字段,但是easyUI的源代码中是ajax拿到数据后直接根据列去显示,使得我不得不修改easyUI类库。 先说一下思路:首先UI的datagrid中没有指定任何列,...

jinvasshole 147

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

CYQ.Data 快速开发EasyUI

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33946020的博客 172

EasyUI之基本介绍

网址: http://www.jeasyui.net/(中文网) http://www.jeasyui.com/(英文版) EasyUI官方下载地址:http://www.jeasyui.com/download/index.php 1.什么是easyui? easyui是一种基于jQuery的用户界面插件集合 2.easyui能带给我们什么好处? 1)easyui是个完美支持HTM...

qq_43057807的博客 2574

(转)扩展jquery easyui datagrid 之动态绑定列和数据

本文转载自:http://blog.youkuaiyun.com/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己用$.post()请求,在回调函数中提取出columns配置,添加到原options中去,然后调用$("#datagrid").datagrid(options)来重新生成表格,然后使用$("#da...

weixin_34025151的博客 167

EasyUI–下拉框combobox

首先声明,所谓的数据控件这一个概念,EasyUI官方应该也没这个说法。猫哥是感觉网页上经常使用的、经常需要从后台获取数据后显示到控件内部的,有这么四个:下拉框、下拉列表、树、表格。之前猫哥已经分别演示了如何从json文件、如何从后端(比如Servlet)返回的json数据中加载数据到EasyUI控件。所以对于这四个数据控件,猫哥仅演示从json文件中获取数据后绑定即可,这样非常简洁明了,到了项目开发

编程副队长 1730

什么是EasyUI

http://www.jeasyui.net/(中文网) http://www.jeasyui.com/(英文版) EasyUI官方下载地址:http://www.jeasyui.com/download/index.php 1.什么是easyui? easyui是一种基于jQuery的用户界面插件集合 2.easyui能带给我们什么好处? 1)easyui是个完美支持HTML5网页的完整框架 2)easyui节省网页开发的时间和规模 3)easyui很简单但功能强大 3.easyui如何

qq_51998497的博客 267

EasyUI之DataGrid 请求Url两次问题解决

初始化页面的时候,会请求两次Url,很是莫名其妙 解决步骤 1.首先确保避免两次加载datagrid控件 &lt;table id="grid" class="easyui-datagrid"&gt;&lt;/table&gt; html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次...

绣花针 3167

EsayUI DataGrid 动态列生成

VS2013+Web MVC + EasyUI 控件库,动态列动态数据生成

single209的专栏 2290
上一篇: 3.springboot前后端分离中的问题
下一篇: List自定义排序
cuichen97
博客等级 码龄7年 34粉丝 209原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值