Jquery Jsp 笔记汇总
点击标题查看更多
给你一个表名,把该表的列取出来,为 json_object 使用
方案一:使用系统表 information_schema.COLUMNS
select * from information_schema.COLUMNS where table_name='orders' and table_schema='mysales';
常用:column_name,is_nullable,column_type,column_key,extra
column_key 里有PRI、Extra里有 auto_increment
注:不同的数据库下面可以有相同的表
drop procedure if exists p1;
delimiter $$
create procedure p1
(
$tablename varchar(100),
out $fieldset mediumtext
)
begin
select json_arrayagg(json_object('field',column_name,'type',column_type)) into $fieldset
from information_schema.columns where table_name=$tablename and table_schema='mysales';
end $$
delimiter ;
call p1('employees',@s);
select @s;
方案二
show columns 不过不能用into
set @str = '';
show columns from emploees where @str:=concat(@str,if(@str<>'',',',''),
'{"field":"',lower(field),'","type":"',type,'"}');
select concat('[',@str,']');
注:在存储过程里用prepare语句
其他:white-space:nowrap 不换行
overflowellipsis 多行文本溢出显示省略号
jsp 画图
写json
.....
xdata=[];
for(var i=0;i<rs.rows.length;i++){
r={};
r.name=rs.rows[i].customerid;
r.y=parseFloat(rs.rows[i].amt);
if(i==0){
r.sliced=true;
r.selected=true;
}
xdata.push(r);
}
console.log(xdata);
fn()
取青海省有哪些市
select * from city where parentnodeid='63';
取市有哪些区县
select * from city where parentnodeid='6301';
区县有哪些街道
select * from city where parentnodeid='630102';
四个地方取四个DIV ID
HTML DIV范例:
<div style="border:1px solid #95BBE7;font-size:13px;float:left;width:220px;margin:8px 0px 8px 8px;>
<div id="title" style="background-color:#E0ECFF;height:28px;line-height:28px;border-bottom:1px solid #95B8E7;"> 省份</div>
<div id="province" style="overflow:auto;height:352px;padding:2px 2px 4px 8px;"></div>
</div>
JS:
$(function(){
var p ={};
p.parentnodeid=''; //省份没有父节点
rs=myRunSqlProcedure('xxx',p);
rows=rs.rows;
str='';
for(var i=0;i<rows.length;i++){
str+='<span style="display:inline-block;width:190px;"><a href="javascript:fn1(\''+rows[i].areaid
+'\')">' +rows[i].areaname +'</a></span>';
}
$('#province').html(str);
$('#city').html('');
$('#district').html('');
$('#town').html('');
});
注:传Level为fn1函数用,用来判断输出到哪个层
即javascript:fn1(\''+rows[i].areaid+'\','+rows[i].level+')
function fn1(areaid)
{
var p ={};
p.parentnodeid=areaid; //
rs=myRunSqlProcedure('xxx',p);
rows=rs.rows;
str='';
for(var i=0;i<rows.length;i++){
str+='<span style="display:inline-block;width:190px;"><a href="javascript:fn1(\''+rows[i].areaid
+'\')">' +rows[i].areaname +'</a></span>';
}
$('#province').html(str);
}
判断输出语句
if(level==1){
$('#city').html(str);
$('#district').html('');
$('#town').html('');
}
elseif(level==2){
$('#district').html(str);
$('#town').html('');
}
elseif(level==3)$('#town').html(str);
//title里面加点过的值,把areaname传入fn1函数里
分页系统:
body里第一层 overflow-y:hidden 竖的滚动条不需要
表头table标签不加border
布局可以通过table布局
rows[i]是个对象
JSON.stringify把JSON转换成字符串才可以进行字符串的运算
javascript:fn(s) 传过去的是json
$.attr('readonly',true);
p.productid=$('#productid').val(); 把输入进控件的值取出来
if($('#xxx').length>0) 判断控件是否存在
checkbox 内置属性 onclick="xx(xx);" 点击后调用具体函数
$('#xxx').prop("checked",true);
id='_checkbox'+(row.sysrownow-1);
this.options[this.options.selectedIndex].value select里选中的值
批量只读或disabled
$('input, select, textarea').each(function(index)){
var type=$(this).attr('type');
if(type=='select')$(this).attr("disabled",true);
else $(this).attr("readOnly","readOnly");
}
删除 $(this).val('');
增删改查函数使用
var row={};
row._action=''; // 采取何种行为 add、delete、replace
row._reloadflag=1; //修改数据后重新加载数据
row.customerid='xxxxx'
var p={};
p.data=[];
p.data.push(row);
p.database='';
p.tablename='mysales.customers';
p.keyfield='customerid';
p.sortfield='';
rs=myRunSqlProcedure('sys_runEditRows',p);
each循环 将各个控件的键、值保存到对象中
var row={};
$('input, select, textarea').each(function(index)){
var id=$(this).attr('id');
row[id]=$(this).val();
}
作业1:
自己设计一个页面,把easyui Form(表单)的控件能用的全部用上
<%@ include file="system/easyui_header_plugin.jsp"%>
头文件包含多个css、js引用
<div id="xxx" class="easyui-panel" data-options="title:'aaaaa',width:400" style=""></div>
data-options 填写控件属性,间隔逗号。style里面写html语句
style 比 data-options 执行要迟,js里最迟
js里面写控件class没效果,html里面class有效果
$('#XXX').textbox(); 真正动态产生控件
tips:外面加一个层把绝对定位放到层里
$('#XXX').textbox({
label:'',
labelwidth:'',
width:300,
labelAlign:'right'
});
控件生成函数
function CreateTextbox(xparent,xid,xlabel,xlabelwidth,xtop,xleft,xheight,xwidth,xvalue){
if(xheight<=0) xheight=28;
if(xlabelwidth<=0) xlabelwidth=70;
str='<div style="position:absolute; top:'+xtop+'px; left:'+xleft+'px;">
<input id="'+xid+'" class="easyui-textbox" /></div>';
$('#'+xparent).append(str);
$('#'+xid).textbox({
label: xlabel+':',
labelwidth:xlabelwidth,
height:xheight,
width:xwidth,
labelAlign:'right'
});
}
$(...).numberbox('textbox').css("text-align","right"); //右对齐
取控件某一个属性
var w = $("#myForm1").panel('options').width;
修改文本框的值
$("#stunname").textbox('setValue','张学友');
事件
$("").textbox({
onChange:function(newv,oldv){},
buttonIcon:'locationIcon',
onClickButton:function(){
s=$("#stuname").textbox('getValue');
alert(s);
}
})
用户定义函数
select sys_getPyCode($str) as pycode;
调用
p={];
p.str= 赋值
rs= 调用存储过程
var s = rs.rows[0].pycode;
myRunSqlProcedure 需要调用 system/easuui_functions.js
省份改变后,通过事件把城市data改变
$("").combobox({
data:rs.rows,
label:'省份',
labelWidth:66,
labelAlign:'right',
valueField: 'areaid',
textField: 'areaname',
height:28,
width:280,
onSelect:function(row){
.....
$("").combobox({data:rs.rows});
}
})
$("").combobox('select',rs.rows[10].areaid);
$("").combobox('loadData',rs.rows); 注意语句顺序
editable:false
if(rows.length>15) $().combox({panelHeight:200});
else $().combox({panelHeight:'auto'});
格式变换器,每一行执行
formatter:function(row){
var opts= $(this).combobox('options');
s=row[opts.textField];
....
return s;
图标在 system/css/icon.css
添加一个按钮必须三步,第一个字符串,第二个append,第三个描述一下控件
var x = left+(i-1)*width; 每个按钮的left绝对定位
不能把 if(style.indexOf('plain')>=0) 写在控件属性里
style=';'+style+';';
防止 style出现 xrplain;selectedd 这样的问题,判断用 ;plain;
class="easyui-separator" 竖线也用 $().linkbutton()
style==undefined 参数不定义
layout层中不要写东西
class="easyui-layout" data-options="fit:true" 可以写body里
centerpanel 剩下的 region=north/south/east/west
split:true 可以拉的分割线
audio:
controls 控制板
loop 循环播放
datalist('selectRow',0); 触发 控件里的 onSelected事件
Tabs 选项卡
filebox 列表
老祝的jsp程序的函数可以在easyui_functions里面找
Filebox的属性
buttonText 按钮文字
buttonAlign 按钮出现在哪边
multiple 多选文件
文件夹不一样,文件头也不一样
{sys.timestamp} 时间戳
var files = $('#filebox1').filebox('files');取出选中的文件
files[i] 每个文件信息
取扩展名,源文件找到最后一个点,然后取后面的
xxx.substring(xxx.lastIndexOf(".")+1,255).toLowerCase();
xhr.status ==200 上传正常
var rs= JSON.parse(xhr.responseText) 文件上传反馈
rs.filesourcename 上传的文件名
删除层 $('#myfile'+index).remove() 删除
将每个文件信息放进data数组
$().attr('xdata',JSON.stringify(data)); 添加属性
$().filebox('clear'); 上传后清空
var xtabs=$('#myTab').tabs('tabs');
n = xtabs.length+1;
closable 是否可关
title 标题
selected 是否选中
iframe class='media'
flag 记住有没有被找到+找到第几个
Layout必须加 data-options="fit:true"
先放panel后放datalist 不然没有滚动条
datalist把最主要的内容显示出来,把存储过程函数改一下多列合并
函数可能没提供某些特定功能
$('xxx').textbox({multiline: true;});
控件的名称和数据库的列名要一样
$('input, select, textarea').each(function(index){
var id = $(this).attr('id'); // if(id!=undefined)
row[id]=$(this).val(); // textbox('getValue')
}); 把控件取出来
id.substr(0,7)!='_easyui'
textarea 用 val()
隐藏变量
myHiddenFields('rowid;titlex');
var str=;<input hidden="true" type="hidden" id="rowid">;
$('body').append
addoredit = "replace"; 点过一行所有的保存都是修改的保存
点新增的才算 addoredit = "add"
保存完了之后要把 addoredit 改成replace
将选中的序号记录下来 rowindex=index;
选中 datalist('selectRow',rowindex)
删除数据库里面删掉,客户端也删除,但是光标要重新弄,第十行删除后,光标应该位于第九
if(rowindex==rows.length-1) rowindex--;
var n = $().datalist('getRows').length
删完后要判断 if(row==null) return;
filebox 里 id和name 值要一样 type 要写上,不然后面取出来是undefined
rs=myRunTreeProcedure('d0',p);
data:rs;
checkbox:true;
formatter:function(node){
return ' ' + node.text; //这里可以写层向左移
}
rowindex=null; 一个节点有没有用null
type=='filebox'{ // JSON数组格式
if(value!='') value=value.substring(1,value.length-1);
else value='';
.attr('xfilename',value);
}
小图标可以修改,详细见代码
var roots=$('#myTree1').tree('getRoots'); 将根节点取出来
$().tree('select',roots[0].target);
数据库里删掉了,不重新加载数据,让用户看到的删掉
记载行的位置,然后删除,删除后光标需要换到下一个节点
删除前先把roots取出来,然后循环找到现在这个row节点是第几个节点
然后select,要判断删到最后一个的时候
var nodes = myGetBrotherTreeNode('myTree1', row); // 前后两兄弟+父节点
if(bnodes[1]!=null) $('#myTree1').tree('select',bondes[1].target);
else if .. 判断第一个节点
else if .. 判断父节点
聚焦到第一个框框
fnFileupload('filepath'); 上传
try{
尝试代码
}
catch(e){
异常情况
}
var node = $('#myTree1').tree('find',newid);
找到了就聚焦
树,基本属性,数据加载,两个函数不要用错
树里面的小按钮小图标怎么去掉
取根节点,树里面删除节点,删除后定位两种方法,把所有节点找出来按序号定位(一层)
相关函数,歌曲保存后的节点
datagrid 最好加个属性 border:false
窗体要加按钮,在窗体里面再加个layout
窗体也分上下两部分,上面表单panel也要加border:false,下面工具栏
窗体先不能出来
modal 属性:true 窗体关掉才能点
resizble 属性:false 不给调整窗体大小
closed: true 写在data-options
按钮做了不喜欢扁平,可以操作
$().linkbutton({
plain:false,
onClick:function(){$().window('close');}
});
datagrid:
rownumber: true 显示序号(位数过多可能有问题)
singleSelect 是否只选一条
selectOnCheck 当你打勾的时候选不选中
checkOnSelect 选中的时候打不打勾
colums 数组里面再加数组
title 名字 field(跟数据库一致) width haligh align 居中
frozenColumns
var row = $('#myGrid1').datagrid('getSelected');
if(!row) return;
窗体打开后再聚焦,赋值后语句功能就没有了
聚焦及全部选中
删除多行
not a function 对象错了
var rows= $().datagrid('GetChecked');
rows里面有很多东西,只需要把主键告诉删的东西
for...
{
var row ={};
row.studentid = rows[i].studentid;
row._action = 'delete';
}
datagrid('getRowIndex',rows[i]) 告诉它第几行,计算机告诉你在网格是第几行
倒着删
datagrid('deleteRows',index)
getData 和 getRows 是两回事
var msg='<center>共删除'+rows.length+'行<br>';
messager.confirm('系统提示',msg+'是否确定本次删除?',function(r){console.log(r);
if(r){}
})
删除一行的最好把关键字也放上来
$.messager.alert({
title:'',
msg:'',
fn:function(){}
})
$.messager.alert('系统提示','记录已删除成功!','error'); //info,warning
datagrid api找到column 列的属性
{.....某一列....
formatter: function(value,row,index){
s='<div style="family:'times new roman';">'+value+'</div>'
}
}